{# templates/sales/sales_add.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Add Sale{% endblock %}
{% block stylesheets %}
{% include "sales/styles_and_script/sales_style.html" %}

<style>


/* ── Product Info Bar ── */
.pib-bar {
  display: block !important;
  background: #f8fafc;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  padding: 5px 10px;
  min-height: 32px;
}
.pib-info-row {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px; min-height: 26px;
}
.pib-name {
  font-weight: 700; color: #1e40af; font-size: .8rem;
  margin-right: 4px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pib-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: .72rem; font-weight: 500;
  background: #e2e8f0; color: #374151;
  white-space: nowrap; gap: 3px;
}
.pib-chip b { font-weight: 700; color: inherit; }
.pib-chip.stk { background:#dbeafe; color:#1d4ed8; }
.pib-chip.stk.zero { background:#fee2e2; color:#dc2626; }
.pib-chip.buy { background:#fef3c7; color:#92400e; }
.pib-chip.sp  { background:#d1fae5; color:#065f46; }
.pib-chip.ws  { background:#ede9fe; color:#5b21b6; }
.pib-chip.ppp { background:#f0f9ff; color:#0369a1; }
.pib-chip.co  { background:#f1f5f9; color:#475569; font-style:italic; }
.pib-chip.last { background:#fce7f3; color:#9d174d; cursor:pointer; }
.pib-chip.avg  { background:#d1fae5; color:#065f46; }
.price-input.below-cost { border:2px solid #dc2626 !important; background:#fff1f2 !important; color:#991b1b !important; }
.pib-chip.inv-no-chip { background:#fee2e2; color:#991b1b; font-weight:700; font-size:.8rem; border:1px solid #fca5a5; }
.pib-chip.lr   { background:#fef9c3; color:#713f12; }   /* Point 4: list_rate */
.price-input.below-cost { border: 2px solid #dc2626 !important; background:#fff1f2 !important; color:#991b1b !important; }  /* Point 6 */
#secretProfitModal .modal-header { background:#1a2f4a; border:none; padding:8px 16px; }
#secret-licence-box {
    background:#fff; border:2px dashed #1a2f4a; border-radius:6px;
    padding:14px; text-align:center; font-family:'Courier New',monospace; margin:10px 0;
}
#secret-licence-title { font-size:.7rem; font-weight:700; letter-spacing:2px; color:#888; text-transform:uppercase; }
#secret-licence-code  { font-size:1.1rem; font-weight:900; letter-spacing:4px; color:#1a2f4a; }
#secret-profit-table thead { background:#1a2f4a; color:#fff; }
.pib-chip.last:hover { background:#fbcfe8; }
.pib-chip.last.active { background:#f9a8d4; }

/* Feature 6: Code column min-width for 18-char barcodes */
/* Feature 6: Code column min-width for 18-char barcodes */
#table_products col.col-code { min-width:160px; width:160px; }

/* ── Code-Select (barcode=2) — clean single-line grid ── */
.select2-dropdown.code-dd-wide { min-width: 640px !important; }

.cds-row {
  display: grid;
  align-items: center;
  gap: 0 16px;
  padding: 2px 0;
}
.cds-row-5 { grid-template-columns: 140px 1fr auto auto auto; }
.cds-row-4 { grid-template-columns: 140px 1fr auto auto; }

.cds-code {
  font-family: 'Courier New', monospace;
  font-size: .95rem; font-weight: 900;
  color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cds-name {
  font-size: .86rem; font-weight: 700; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cds-buy, .cds-sale, .cds-stk {
  font-size: .78rem; font-weight: 600;
  color: #000; white-space: nowrap;
}

/* Highlight: sab pure white */
.select2-dropdown.code-dd-wide .select2-results__option--highlighted .cds-code,
.select2-dropdown.code-dd-wide .select2-results__option--highlighted .cds-name,
.select2-dropdown.code-dd-wide .select2-results__option--highlighted .cds-buy,
.select2-dropdown.code-dd-wide .select2-results__option--highlighted .cds-sale,
.select2-dropdown.code-dd-wide .select2-results__option--highlighted .cds-stk {
  color: #fff !important;
}

/* Already-selected row (aria-selected=true) — dark text, NOT white */
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background-color: #fff !important;
  color: #000 !important;
}
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) * {
  color: #000 !important;
}



/* Feature 4: Buy chip clickable */
#pibBuy { cursor:pointer; }
#pibBuy:hover { background:#fde68a; }

/* Feature 5: Expiry chip */
.pib-chip.expiry         { background:#f0fdf4; color:#166534; cursor:pointer; }
.pib-chip.expiry:hover   { background:#dcfce7; }
.pib-chip.expiry.short   { background:#fff7ed; color:#92400e; }
.pib-chip.expiry.short:hover  { background:#fed7aa; }
.pib-chip.expiry.expired { background:#fef2f2; color:#dc2626; }
.pib-chip.expiry.expired:hover { background:#fecaca; }
.pib-branch-row {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid #e9ecef;
}


/* ── Alt+P Modal — Professional redesign ── */
#altPrintModal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
}
#altPrintModal .modal-dialog { max-width: 560px; }
#ap-modal-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}
#ap-modal-header .ap-icon-wrap {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: #f2f4f7;
    display: flex; align-items: center; justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}
#ap-modal-header .ap-title { font-size: 13.5px; font-weight: 600; color: #111; margin: 0; }
#ap-modal-header .ap-sub   { font-size: 11px; color: #888; margin: 0; }
#ap-modal-header .ap-badge {
    font-size: 10px; color: #999;
    background: #f2f4f7; border: 1px solid #e2e2e2;
    padding: 2px 8px; border-radius: 6px; margin-right: 6px;
}
#ap-modal-header .ap-close-btn {
    width: 26px; height: 26px;
    border: none; background: transparent; cursor: pointer;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    color: #888; font-size: 15px; transition: background .12s, color .12s;
}
#ap-modal-header .ap-close-btn:hover { background: #f2f4f7; color: #333; }
#ap-kbd-bar {
    padding: 5px 20px;
    background: #fafafa;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex; align-items: center; gap: 6px;
}
#ap-kbd-bar .ap-kbd-icon { font-size: 12px; color: #bbb; margin-right: 2px; }
#ap-kbd-bar kbd {
    font-size: 10px; color: #555;
    background: #fff; border: 1px solid #ddd;
    padding: 1px 5px; border-radius: 4px;
    font-family: inherit;
}
#ap-kbd-bar .ap-ktext { font-size: 11px; color: #aaa; }
#ap-tpl-container { padding: 14px 18px 6px; max-height: 340px; overflow-y: auto; }
.ap-cat-row {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 7px;
}
.ap-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ap-cat-label {
    font-size: 10px; font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase; color: #888;
}
.ap-chips-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.ap-chip {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 6px 13px;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: #222;
    transition: border-color .1s, background .1s, transform .1s, box-shadow .1s;
    outline: none; white-space: nowrap;
}
.ap-chip .ap-chip-sub { font-size: 10px; color: #aaa; font-weight: 400; }
.ap-chip:hover {
    border-color: #b0c4de;
    background: #f6f9fd;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(45,95,138,.10);
}
.ap-chip.ap-focused {
    border-color: #2d5f8a !important;
    background: #edf3fa !important;
    color: #1a4a74 !important;
    box-shadow: 0 0 0 3px rgba(45,95,138,.13) !important;
    transform: translateY(-1px);
}
.ap-chip.ap-focused .ap-chip-sub { color: #5a88b0; }
#ap-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(0,0,0,.07);
    display: flex; align-items: center; justify-content: space-between;
    background: #fafafa;
}
#ap-hint { font-size: 11px; color: #aaa; }
#ap-cancel-btn {
    padding: 6px 16px;
    border: 1px solid #ddd; border-radius: 8px;
    background: #fff; cursor: pointer;
    font-size: 12px; font-weight: 500; color: #555;
    transition: background .1s, border-color .1s;
}
#ap-cancel-btn:hover { background: #f5f5f5; border-color: #bbb; }
#ap-loading { padding: 40px 20px; text-align: center; display: none; }
#ap-loading p { font-size: 12px; color: #888; margin-top: 10px; }


</style>

{% endblock %}
 
{% block content %}
<div class="sale-page-row">
<form action="{{ form_action_url }}" method="post" class="saleForm">
  {% csrf_token %}
    <input type="hidden" name="tx" value="{{ tx|default:'sale' }}">
    <input type="hidden" name="post_to_fbr" value="0">
    <input type="hidden" id="ref_sale_invoice" name="ref_sale_invoice" value="{{ ref_sale_invoice|default_if_none:'' }}">

    <input type="hidden" id="contract_id" name="contract_id" value="{{ contract_id|default_if_none:'' }}">
    <input type="hidden" id="last_sale_area_id" name="last_sale_area_id" value="{{ last_sale_area_id|default_if_none:'' }}">
    <input type="hidden" id="last_sale_area_name" name="last_sale_area_name" value="{{ last_sale_area_name|default_if_none:'' }}">
    
    <input type="hidden" id="contract_customer_id" value="{{ contract_customer_id|default_if_none:'' }}">
    <input type="hidden" id="contract_customer_name" value="{{ contract_customer_name|default_if_none:'' }}">

  <!-- LIGHT GREY BAR for toolbar (mobile-friendly) -->
  <div class="p-2 bg-light" style="background-color:#f7f9fc; border-bottom:1px solid #e9ecef;">

  <div class="form-row align-items-center">
    <!-- Row: Home + Sale Type + Rate Type -->
    <div class="row align-items-center no-gutters">
      <!-- Home icon -->
      <div class="col-2 col-md-auto pr-2">
        <a href="{% url 'pos:index' %}" class="d-inline-block align-middle" title="Home">
          <i class="fas fa-home fa-lg text-primary"></i>
        </a>
      </div>

      <!-- Sale Type --> 
      <div class="col-5 col-md-auto pr-2">
        <select id="sale_type" name="sale_type"
                class="custom-select custom-select-sm w-100 shrink-select">
          <option value="cash">Cash</option>
          <option value="credit">Credit</option>
          <option value="cash_return">Cash Return</option>
          <option value="credit_return">Credit Return</option>
          <option value="vendor_sale">Vendor Sale</option>
          <option value="vendor_return">Vendor Return</option>
          <option value="estimate">Estimate</option>
        </select>
      </div>

      <!-- Rate Type -->
      <div class="col-5 col-md-auto">
        <select id="rate_type" name="rate_type"
                class="custom-select custom-select-sm w-100 shrink-select">
          <option value="local_sale">Local Sale</option>
          <option value="wholesale">Whole Sale</option>
          <option value="supplier">Supplier</option>
          <option value="branches">Branches</option>
          <option value="type_1">Type 1</option>
          <option value="type_2">Type 2</option>
          <option value="type_3">Type 3</option>
          <option value="type_4">Type 4</option>
          <option value="type_5">Type 5</option>
        </select>
      </div>
    </div>


  {% if settings_dict.business_type == 'distribution' %}
  <!-- Sale Area --> 
  <div class="form-group col-12 col-md-auto mb-2" style="min-width:200px;">
    <select id="sale_area" class="form-control form-control-sm select2" placeholder="Search Area…"></select>
  </div>
  {% endif %}

  <!-- Customer (Select2) + Add button IN ONE BLOCK -->
  <div id="customer_block" class="form-group col-12 col-md-auto mb-2 d-flex align-items-center" style="min-width:260px;">
    <select
      id="searchbox_customers"
      name="customer"
      class="form-control form-control-sm select2"
      placeholder="Search customer…">
    </select>
    <a href="{% url 'customers:customers_add' %}" target="_blank" class="btn btn-sm btn-outline-primary ml-2" title="Add new customer">
      <i class="fas fa-plus"></i>
    </a>
  </div>

  <div id="vendor_block" class="form-group col-12 col-md-auto mb-2 d-none" style="min-width:260px;">
    <div class="d-flex align-items-center">
      <select
        id="searchbox_vendors"
        name="vendor"
        class="form-control form-control-sm select2"
        placeholder="Search vendor…">
      </select>
      <a href="{% url 'products:vendors_add' %}" target="_blank" class="btn btn-sm btn-outline-primary ml-2" title="Add new vendor">
        <i class="fas fa-plus"></i>
      </a>
    </div>
  </div>

  <!-- Order Booker -->
  <div class="form-group col-12 col-md-auto mb-2" style="min-width:200px;">
    <select id="order_booker" class="form-control form-control-sm select2" placeholder="Order Taker"></select>
  </div>

  {% if settings_dict.business_type == 'oil' %}
  <button type="button" id="btnVehicle" class="btn btn-outline-secondary btn-sm">Vehicle</button>
  {% else %}
  <button type="button" id="btnVehicle" class="btn btn-outline-secondary btn-sm d-none">Vehicle</button>
  {% endif %}

  <!-- Sale Date -->
  <div class="form-group col-4 col-md-auto mb-2">
    <input type="date" id="sale_date" name="sale_date" class="form-control form-control-sm"  style="max-width:140px;" value="{{ today|date:'Y-m-d' }}">
  </div>

  <!-- Settings + Sales Report (single-line on mobile) -->
  <div class="form-group col-8 col-md-auto mb-2 d-flex align-items-center flex-nowrap text-nowrap">

    <a href="{% url 'pos:config_list' %}?type=sale" target="_blank"
       class="btn btn-sm btn-outline-secondary mr-2" title="Settings">
      <i class="fas fa-cog"></i>
    </a>

    <a href="{% url 'sales:sales_list' %}"
       class="btn btn-sm btn-outline-secondary btn-sales-report" title="Sale Report">
      <i class="fas fa-chart-line mr-1"></i> Sale Report
    </a>
  </div>

  <div id="modeBanner" class="mt-2" style="display:none;">
    <span class="badge badge-danger">RETURN MODE</span>
  </div>
</div>

<div class="form-row align-items-center inline-row-md">
  <div class="form-group col-6 col-md-2 mb-1">
    <input type="text" inputmode="numeric" pattern="\d*" maxlength="20"
           id="cash_customer_phone" name="cash_customer_phone"
           placeholder="Phone # (Search > F9)"
           class="form-control form-control-sm" autocomplete="tel">
  </div>

  <div class="form-group col-6 col-md-2 mb-1">
    <input type="text" id="cash_customer_name" name="cash_customer_name"
           placeholder="Customer Name"
           class="form-control form-control-sm" autocomplete="name">
  </div>

  <div class="form-group col-4 col-md-auto mb-2">
    <input type="text" id="cash_customer_address" name="cash_customer_address"
           placeholder="Address"
           class="form-control form-control-sm" autocomplete="street-address">
  </div>

  <!-- Sale Date -->
  <div class="form-group col-4 col-md-auto mb-2">
    <input type="text" id="cash_customer_voucher_no" name="cash_customer_voucher_no"
           placeholder="Voucher #"
           class="form-control form-control-sm">
  </div>

</div>

<!-- NEW: Multi-Branch Stock Display Bar -->
<div id="multiBranchStockBar" class="multi-branch-bar pib-bar" style="position:relative;">
  <!-- Row 1: Active product details -->
  <div class="pib-info-row" id="pibInfoRow">
    <span id="pibEmpty">
      <small class="text-muted">
      </small>
      <span class="pib-chip inv-no-chip ml-2" id="pibInvNo" title="Invoice Number">
        Invoice # <b>{{ next_invoice_no|default:"—" }}</b>
      </span>
    </span>
    <div id="pibPills" style="display:none;" class="d-flex align-items-center flex-wrap" style="gap:4px;">
      <span class="pib-name" id="pibName"></span>
      <span class="pib-chip stk" id="pibStock">Stk <b>—</b></span>
      {% if 'show_purchase_price_in_sale' in allowed_features %}
      <span class="pib-chip buy" id="pibBuy" title="Click for FIFO stock layers">Buy <b>—</b></span>
      {% endif %}
      {% if pos_type == "pharmacy" %}
      <span class="pib-chip expiry" id="pibExpiry" style="display:none;"
            title="Current expiry — click for all batches">Exp <b id="pibExpiryVal">—</b></span>
      {% endif %}
      <span class="pib-chip avg" id="pibAvg" style="display:none;">Avg <b>—</b></span>
      <span class="pib-chip sp"  id="pibSp">Sale <b>—</b></span>
      <span class="pib-chip ws"  id="pibWs">WS <b>—</b></span>
      <span class="pib-chip ppp" id="pibPpp">PPP <b>—</b></span>
      <span class="pib-chip lr"  id="pibLr" style="display:none;">MRP <b>—</b></span>
      <span class="pib-chip co"  id="pibCo"></span>
      <span class="pib-chip last" id="pibLast" title="Click for sale history">
        <i class="fas fa-history"></i> Last <b>—</b>
      </span>
    </div>
  </div>
  <!-- Row 2: Branch stock (shown when multi-branch data available) -->
  <div class="pib-branch-row" id="pibBranchRow" style="display:none;">
    <span class="bar-label"><i class="fas fa-warehouse"></i></span>
    <div id="multiBranchStockList" class="stock-chips-container"></div>
  </div>
  <!-- Help button — info bar ke right end mein -->
  <button type="button" id="helpShortcutBtn"
          title="Keyboard Shortcuts (?)"
          style="position:absolute;right:8px;top:50%;transform:translateY(-50%);
                 background:#1e40af;border:none;color:#fff;border-radius:50%;
                 width:22px;height:22px;font-size:.7rem;line-height:1;cursor:pointer;
                 display:flex;align-items:center;justify-content:center;padding:0;">
    ?
  </button>
</div>
</div>
  <input type="hidden" id="restrict_to_return" value="{{ restrict_to_return|default:False }}">
  <input type="hidden" id="restrict_to_sale" value="{{ restrict_to_sale|default:False }}">
  <input type="hidden" id="restrict_to_estimate" value="{{ restrict_to_estimate|default:False }}">
  <input type="hidden" id="forced_saletype" value="{{ forced_saletype|default:'' }}">
  <input type="hidden" id="restrict_to_vendor_sale" value="{{ restrict_to_vendor_sale|default:False }}">
  <input type="hidden" id="restrict_to_vendor_return" value="{{ restrict_to_vendor_return|default:False }}">
  <div class="p-3 mt-0 mx-auto" style="background:white; box-shadow:0 1px 4px rgba(0,0,0,0.1); max-width:98%;">

    <div class="table-responsive"> 
      <table id="table_products" class="table table-sm">
        <colgroup>
          <col class="col-del">
          <col class="col-vcode">
          <col class="col-code">
          <col class="col-name">
          {% if settings_dict.show_warehouse %}<col class="col-spec-a">{% endif %}
          {% if settings_dict.show_batch %}<col class="col-spec-b">{% endif %}
          {% if not settings_dict.pieces_wise_sale %}<col class="col-qty">{% endif %}
          {% if settings_dict.show_bags_columns %}<col class="col-bags">{% endif %}
          {% if settings_dict.show_pcs or settings_dict.pieces_wise_sale %}<col class="col-pcs">{% endif %}
          {% if settings_dict.show_bonus %}<col class="col-bonus">{% endif %}
          {% if settings_dict.show_weight_or_meters %}<col class="col-weight">{% endif %}
          {% if settings_dict.show_piece_wise_price %}<col class="col-item-price">{% endif %}
          <col class="col-price">
          {% if settings_dict.show_gst %}<col class="col-gst">{% endif %}
          {% if settings_dict.show_f_tax %}<col class="col-ftax">{% endif %}
          {% if settings_dict.show_disc %}<col class="col-disc">{% endif %}
          {% if settings_dict.show_to %}<col class="col-disc-amt">{% endif %}

          <col class="col-total">
          <col class="col-p-pack" hidden>

        </colgroup>
        <thead class="thead-light">
          <tr>
            <th>Del</th>
            <th>VCode</th> 
            <th>Code</th>
            <th>Name</th>
            {% if settings_dict.show_warehouse %}<th>Spec A</th>{% endif %}
            {% if settings_dict.show_batch %}<th>Batch</th>{% endif %}
            {% if settings_dict.pieces_wise_sale %}
            <th>Pcs</th>
            {% if settings_dict.show_bags_columns %}<th>Bags</th>{% endif %}
            {% else %}
            <th>Qty</th>
            {% if settings_dict.show_bags_columns %}<th>Bags</th>{% endif %}
            {% if settings_dict.show_pcs %}<th>Pcs</th>{% endif %}
            {% endif %}
            {% if settings_dict.show_bonus %}<th>Bonus</th>{% endif %}
            {% if settings_dict.show_weight_or_meters %}<th>Mtrs.</th>{% endif %}
            {% if settings_dict.show_piece_wise_price %}<th>Pcs-Price</th>{% endif %}
            <th>Price</th>
            {% if settings_dict.show_gst %}<th>GST</th>{% endif %}
            {% if settings_dict.show_f_tax %}<th>F-Tax</th>{% endif %}
            {% if settings_dict.show_disc %}<th>Disc %</th>{% endif %}
            {% if settings_dict.show_to %}<th>Disc Amt</th>{% endif %}
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr class="template-row">
            <td><button type="button" class="btn btn-sm btn-danger btn-del">×</button></td>

            <!-- ✅ VCode column -->
            <td>
              <input type="text" class="form-control form-control-sm vcode-input" placeholder="SKU / Serial">
              <input type="hidden" class="variant-id-input" value="">
              <input type="hidden" class="serial-id-input" value="">
              <input type="hidden" class="line-uid-input" value="">
            </td>

            <!-- ✅ Code column -->
            <td><input enterkeyhint="next" type="text" class="form-control form-control-sm code-input" /></td>

            <!-- ✅ Name column -->
            <td><select class="form-control form-control-sm search-product select2"></select></td>

            {% if settings_dict.show_warehouse %}
            <td>
              <select name="spec_a[]" class="form-control form-control-sm spec-a-select">
                <!-- JS fills tenant Spec A master list (no Default, no search) -->
              </select>
            </td>
            {% endif %}

            {% if settings_dict.show_batch %}
            <td>
              <select name="spec_b[]" class="form-control form-control-sm spec-b-select">
                <option value="">Default</option>
              </select>
            </td>
            {% endif %}
 
            {% if settings_dict.pieces_wise_sale %}
            {# Single td: hidden qty-input for JS + visible pcs-input for user #}
            <td>
              <input type="hidden" class="qty-input" value="0" />
              <input enterkeyhint="next" type="number" min="0" step="any" placeholder="Pcs"
                     class="form-control form-control-sm pcs-input"
                     title="Piece count — 36 pcs × ppp=24 → 1.5 units stored" />
            </td>
            {% if settings_dict.show_bags_columns %}<td><input enterkeyhint="next" type="number" min="0" class="form-control form-control-sm bags-input"></td>{% endif %}
            {% else %}
            <td><input enterkeyhint="next" type="number" min="0" step="any" class="form-control form-control-sm qty-input" /></td>
            {% if settings_dict.show_bags_columns %}<td><input enterkeyhint="next" type="number" min="0" class="form-control form-control-sm bags-input"></td>{% endif %}
            {% if settings_dict.show_pcs %}<td><input enterkeyhint="next" type="number" class="form-control form-control-sm pcs-input"></td>{% endif %}
            {% endif %}
            {% if settings_dict.show_bonus %}<td><input enterkeyhint="next" type="number" class="form-control form-control-sm bonus-input"></td>{% endif %}
            {% if settings_dict.show_weight_or_meters %}<td><input enterkeyhint="next" type="number" step="0.01" class="form-control form-control-sm weight-input"></td>{% endif %}
            {% if settings_dict.show_piece_wise_price %}
              <td>
                <input enterkeyhint="next"
                       type="number"
                       class="form-control form-control-sm item-wise-price-input" />
              </td>
            {% endif %}
            <td><input enterkeyhint="next" type="number" class="form-control form-control-sm price-input"></td>
            {% if settings_dict.show_gst %}<td><input enterkeyhint="next" type="number" class="form-control form-control-sm gst-input"></td>{% endif %}
            {% if settings_dict.show_f_tax %}<td><input enterkeyhint="next" type="number" class="form-control form-control-sm ftax-input"></td>{% endif %}
            {% if settings_dict.show_disc %}<td><input enterkeyhint="next" type="number" class="form-control form-control-sm disc-input"></td>{% endif %}

            {% if settings_dict.show_to %}<td><input enterkeyhint="next" type="number" class="form-control form-control-sm to-input"></td>{% endif %}

            <td class="total-display">0.00</td>
            <td hidden>
              <input type="hidden" class="form-control form-control-sm p-pack-input" value="1">
            </td>


          </tr>
        </tbody>
      </table>
    </div>
  </div>

<!-- ============ UNIFIED FIXED FOOTER ============ -->
<div class="sale-unified-footer" id="saleUnifiedFooter">

  <!-- Strip 1: Sub Total + Adjustments -->
  <div class="footer-totals-strip">
    <div class="ft-cell">
      <label>Sub Total</label>
      <input id="sub_total" class="form-control form-control-sm" placeholder="0" readonly>
    </div>

    {% if 'discount_in_sale' in allowed_features %}
    <div class="ft-cell">
      <label>Discount</label>
      <div class="disc-split">
        <input id="flat_discount_percent" class="form-control form-control-sm" placeholder="%">
        <input id="flat_discount" class="form-control form-control-sm" placeholder="Amt">
      </div>
    </div>
    {% endif %}

    {% if 'other_charges_in_sale' in allowed_features %}
    <div class="ft-cell">
      <label>Transport</label>
      <input id="transport_charges" class="form-control form-control-sm" placeholder="0">
    </div>
    <div class="ft-cell">
      <label>{{ other_label|default:"Others" }}</label>
      <input id="other_charges" class="form-control form-control-sm" placeholder="0">
    </div>
    <div class="ft-cell">
      <label>Adv Tax</label>
      <input id="flat_sale_tax" class="form-control form-control-sm" placeholder="0">
    </div>
    {% endif %}
  </div>

  <!-- Strip 2: Banks (left) + Remarks/Bill Total (right) -->
  <div class="footer-middle">

    <!-- LEFT: Bank Payments -->
    <div class="fm-left">
      <div class="payment-section">
        <div class="payment-section-title">
          <span><i class="fas fa-university mr-1"></i> Payments</span>
          <div class="d-flex align-items-center gap-1">
            <span id="pay_summary_banks" class="pay-badge banks" style="display:none;">
              Banks: <b id="pay_sum_bank_val">0</b>
            </span>
            <span id="pay_summary_cheques" class="pay-badge cheques" style="display:none;">
              Chq: <b id="pay_sum_cheque_val">0</b>
            </span>
            <span id="pay_summary_total" class="pay-badge total-pay" style="display:none;">
              Rcvd: <b id="pay_sum_total_val">0</b>
            </span>
          </div>
        </div>

        <div id="bankPaymentsContainer">
          <div class="bank-row primary-row" data-idx="0">
            <div class="bank-select-wrap">
              <select class="form-control form-control-sm bp-bank-select">
                {% for bank in bank_accounts %}
                  <option value="{{ bank.id }}">{{ bank.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="bank-amount-wrap">
              <input type="number" step="0.01"
                     class="form-control form-control-sm bp-amount-input"
                     placeholder="Amount (F1)">
            </div>
            <button type="button" class="bank-del-btn bp-del-btn" title="Remove">&times;</button>
          </div>
        </div>

        <div class="d-flex align-items-center gap-2 mt-1">
          <button type="button" class="btn-add-payment" id="btnAddBankPayment">
            <i class="fas fa-plus"></i> Bank
          </button>
          <button type="button" class="cheque-toggle-btn" id="btnToggleCheques">
            <i class="fas fa-money-check-alt"></i> Cheque
          </button>
        </div>
      </div>

      <!-- Cheque Section (hidden by default) -->
      <div id="chequeSection" style="display:none;">
        <div class="cheque-section">
          <div class="payment-section-title">
            <span><i class="fas fa-money-check-alt mr-1"></i> Cheques</span>
            <button type="button" class="cheque-toggle-btn" id="btnCloseCheques"
                    style="font-size:0.68rem; padding:1px 6px;">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div id="chequesContainer"></div>
          <button type="button" class="btn-add-payment mt-1" id="btnAddCheque">
            <i class="fas fa-plus"></i> Cheque
          </button>
        </div>
      </div>
    </div>

    <!-- RIGHT: Remarks + Bill Total -->
    <div class="fm-right">
      {% if 'other_charges_in_sale' in allowed_features %}
      <input id="payment_remarks" class="form-control form-control-sm"
             placeholder="Remarks">
      {% endif %}

      <div class="footer-bill-total">
        <span class="fbt-label">Bill Total</span>
        <input id="amount_change" class="fbt-value" placeholder="0" readonly>
      </div>
      <label id="grand_total" style="display:none;"></label>
    </div>
  </div>

  <!-- Strip 3: Nav Bar (Previous + Qty + Units + Grand Total + Save/Print) -->
  <div class="footer-nav-strip">
    <span class="fn-badge" title="Invoice Number">
      Inv: <b id="nav_invoice_no" style="color:#86efac; margin:0;">{{ next_invoice_no|default:"—" }}</b>
    </span>
    <span class="fn-badge">
      Prev: <b><label id="due_balance" style="color:#fbbf24; margin:0;">0</label></b>
    </span>
    <span class="fn-badge">
      Qty: <b id="nav_qty_count">0</b>
    </span>
    <span class="fn-badge">
      Units: <b id="nav_units_count">0</b>
    </span>
    
    <span class="fn-badge fn-badge-weight" style="display:none;">
      Wt: <b id="nav_weight_count">0</b> kg
    </span>

    <span class="fn-grand">
      <label name="grand_total" style="margin:0;">0</label>
    </span>

    <div class="btn-group">
      <button type="button" class="btn btn-outline-light btn-sm btnSave"
              id="save-main-btn">Save</button>
      <button type="button" class="btn btn-outline-warning btn-sm btnSave"
              id="save-hold-btn">Hold</button>
      <button type="button" class="btn btn-outline-light btn-sm btnPrint"
              id="print-main-btn">Print</button>
      <button type="button" class="btn btn-sm btnWp" id="whatsapp-main-btn" 
              style="background-color:#25D366; border-color:#25D366; color:#fff;">
        <i class="fab fa-whatsapp mr-1"></i>WhatsApp
      </button>
    </div>
  </div>

</div>

<!-- Keyboard Shortcuts Help Modal — Professional -->
<div class="modal fade" id="shortcutsHelpModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
    <div class="modal-content" style="border:none;border-radius:20px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.12);">

      <!-- Header -->
      <div style="padding:18px 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid rgba(0,0,0,.07);">
        <div style="display:flex;align-items:center;gap:12px;">
          <div style="width:36px;height:36px;border-radius:10px;background:#f2f4f7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fas fa-keyboard" style="font-size:15px;color:#666;"></i>
          </div>
          <div>
            <p style="margin:0;font-size:14px;font-weight:600;color:#111;">Keyboard Shortcuts</p>
            <p style="margin:0;font-size:11px;color:#888;">Sales Invoice Form</p>
          </div>
        </div>
        <button type="button" data-dismiss="modal"
                style="width:28px;height:28px;border-radius:50%;border:none;background:#f2f4f7;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;font-size:14px;transition:background .15s;">
          &times;
        </button>
      </div>

      <!-- Body -->
      <div style="max-height:460px;overflow-y:auto;padding:4px 0 8px;">

        <!-- Section: Invoice -->
        <div style="padding:12px 18px 4px;">
          <p style="margin:0;font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#aaa;">Invoice</p>
        </div>
        <div class="skm-group">
          <div class="skm-row"><span>Save invoice</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>S</kbd></span></div>
          <div class="skm-row"><span>Print invoice</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>P</kbd></span></div>
          <div class="skm-row"><span>Send on WhatsApp</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>W</kbd></span></div>
          <div class="skm-row"><span>New sale — new tab</span><span class="skm-keys"><kbd>Alt</kbd><kbd>N</kbd></span></div>
          <div class="skm-row"><span>New return — new tab</span><span class="skm-keys"><kbd>Alt</kbd><kbd>R</kbd></span></div>
          <div class="skm-row"><span>New estimate — new tab</span><span class="skm-keys"><kbd>Alt</kbd><kbd>E</kbd></span></div>
          <div class="skm-row"><span>Print template chooser</span><span class="skm-keys"><kbd>Alt</kbd><kbd>P</kbd></span></div>
        </div>

        <!-- Section: Product Row -->
        <div style="padding:12px 18px 4px;">
          <p style="margin:0;font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#aaa;">Product Row</p>
        </div>
        <div class="skm-group">
          <div class="skm-row"><span>Focus bank amount</span><span class="skm-keys"><kbd>F1</kbd></span></div>
          <div class="skm-row"><span>Toggle buy / avg price chip</span><span class="skm-keys"><kbd>F2</kbd></span></div>
          <div class="skm-row"><span>Product sale history</span><span class="skm-keys"><kbd>F3</kbd><span class="skm-or">or</span><kbd>Alt</kbd><kbd>H</kbd></span></div>
          <div class="skm-row"><span>Focus last row — code input</span><span class="skm-keys"><kbd>F4</kbd></span></div>
          <div class="skm-row"><span>Focus last row — name search</span><span class="skm-keys"><kbd>F5</kbd></span></div>
          <div class="skm-row"><span>Delete current row (works inside search too)</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>D</kbd></span></div>
          <div class="skm-row"><span>Adjust qty ±1 (empty qty field)</span><span class="skm-keys"><kbd>+</kbd><kbd>−</kbd></span></div>
          <div class="skm-row"><span>Focus last product row</span><span class="skm-keys"><kbd>Esc</kbd></span></div>
        </div>

        <!-- Section: Customer -->
        <div style="padding:12px 18px 4px;">
          <p style="margin:0;font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#aaa;">Customer</p>
        </div>
        <div class="skm-group">
          <div class="skm-row"><span>Phone number customer search</span><span class="skm-keys"><kbd>F9</kbd></span></div>
          <div class="skm-row"><span>Quick pay dialog</span><span class="skm-keys"><kbd>F12</kbd><span class="skm-or">or</span><kbd>Ctrl</kbd><kbd>Q</kbd></span></div>
        </div>

        <!-- Section: Other -->
        <div style="padding:12px 18px 4px;">
          <p style="margin:0;font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#aaa;">Other</p>
        </div>
        <div class="skm-group">
          <div class="skm-row"><span>Open sale report — new tab</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>O</kbd></span></div>
          <div class="skm-row"><span>Secret profit panel</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>U</kbd></span></div>
          <div class="skm-row"><span>Payment template 1–9</span><span class="skm-keys"><kbd>Ctrl</kbd><kbd>1–9</kbd></span></div>
        </div>

      </div>

      <!-- Footer -->
      <div style="padding:10px 20px;border-top:0.5px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:space-between;">
        <span style="font-size:11px;color:#bbb;">Press <kbd style="font-size:10px;background:#f2f4f7;border:1px solid #e2e2e2;border-radius:4px;padding:1px 5px;color:#666;">?</kbd> button anytime</span>
        <button type="button" data-dismiss="modal"
                style="font-size:12px;padding:6px 16px;border-radius:8px;border:1px solid #e2e2e2;background:#f8f9fa;color:#333;cursor:pointer;font-weight:500;">Done</button>
      </div>

    </div>
  </div>
</div>

<style>
.skm-group { padding: 0 8px; }
.skm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; transition: background .1s;
}
.skm-row:hover { background: #f7f8fa; }
.skm-row > span:first-child { font-size: 13px; color: #222; }
.skm-keys { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.skm-keys kbd {
  font-size: 11px; font-family: inherit;
  background: #f2f4f7; border: 1px solid #e2e2e2;
  border-radius: 6px; padding: 2px 8px; color: #555;
  font-weight: 500;
}
.skm-or { font-size: 10px; color: #bbb; padding: 0 2px; }
</style>


<input type="hidden" name="sale_items" value="">
<input type="hidden" id="hold_flag" value="0">
<input type="hidden" name="amount_change" value="">
<input type="hidden" name="payment_remarks" value="">
<div class="modal" id="vehicleModal" tabindex="-1">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header py-2">
      <h6 class="modal-title">Vehicle Meter</h6>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
    </div>

    <div class="modal-body pt-2">
      <div class="row">
        <!-- LEFT: vehicle select + attached vehicles -->
      <div class="col-md-5 border-right">
        <div class="d-flex justify-content-between align-items-center">
          <strong class="small mb-0">Customer Vehicles</strong>
          <input id="custVehSearch" class="form-control form-control-sm" style="width: 140px" placeholder="Search...">
        </div>
        <div class="table-responsive mt-1" style="max-height:240px; overflow:auto;">
          <table class="table table-sm table-hover mb-0" id="cust_vehicle_table">
            <thead class="thead-light">
              <tr><th class="small">Vehicle</th></tr>
            </thead>
            <tbody><!-- filled by JS --></tbody>
          </table>
        </div>
        <small id="custVehHint" class="text-muted">Select a Credit customer to see attached vehicles.</small>

        <hr class="my-2">

        <label class="small mb-1">Vehicle</label>
        <select id="vehicle_select" class="form-control" style="width:100%"></select>
      </div>

        <!-- RIGHT: last 5 readings -->
        <div class="col-md-7">
          <div class="d-flex justify-content-between align-items-center">
            <strong class="small mb-0">Last 5 Readings</strong>
            <small id="hist_hint" class="text-muted"></small>
          </div>
          <div class="table-responsive mt-1" style="max-height:280px; overflow:auto;">
            <table class="table table-sm table-striped mb-0" id="reading_history_table">
              <thead class="thead-light">
                <tr>
                  <th class="small">Invoice</th>
                  <th class="small">Date</th>
                  <th class="small text-right">Reading</th>
                </tr>
              </thead>
              <tbody><!-- filled by JS --></tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- BOTTOM: current reading input -->
      <hr class="my-2">
      <div class="row">
        <div class="col text-center">
          <label class="small mb-1 d-block">Current Reading</label>
          <input type="number" step="0.01" id="current_reading" class="form-control d-inline-block" style="width:240px" placeholder="Enter today's reading">
        </div>
      </div>
    </div>

    <div class="modal-footer d-flex">
      <!-- NEW: opens in a new tab -->
      <a href="/products/vehicles/add/" target="_blank" rel="noopener"
         class="btn btn-outline-secondary mr-auto">
        Add New Vehicles
      </a>

      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      <button type="button" id="applyVehicle" class="btn btn-primary">Apply</button>
    </div>

  </div></div>
</div>

<input type="hidden" id="veh_hidden_id" name="veh_hidden_id">
<input type="hidden" id="veh_hidden_reading" name="veh_hidden_reading">

</form>

{% if settings_dict.show_right_panel_in_sale_invoice %}
<aside class="sale-right-panel">


  <div class="srp-actions">
    <a href="{% url 'sales:sales_list' %}" class="srp-action-btn srp-action-return" target="_blank">
      <i class="fas fa-undo"></i><span>Return Invoice</span>
    </a>
    <a href="{% url 'sales:sales_list' %}" class="srp-action-btn" target="_blank">
      <i class="fas fa-chart-line"></i><span>Sale Report</span>
    </a>
    <a href="{% url 'products:products_list' %}" class="srp-action-btn" target="_blank">
      <i class="fas fa-plus-circle"></i><span>Product</span>
    </a>
    <a href="{% url 'customers:customers_list' %}" class="srp-action-btn" target="_blank">
      <i class="fas fa-user-plus"></i><span>Customers</span>
    </a>
    <a href="{% url 'customers:check_customer_ledger' %}" class="srp-action-btn" target="_blank">
      <i class="fas fa-book"></i><span>Cust Ledger</span>
    </a>
    <a href="{% url 'reports:business_closing' %}" class="srp-action-btn" target="_blank">
      <i class="fas fa-cash-register"></i><span>Closing</span>
    </a>
  </div>

  <div class="srp-hold-list" id="srpHoldList">
    <div class="srp-hold-empty">Loading…</div>
  </div>

</aside>
{% endif %}
</div>

<div class="modal fade" id="productQuickAddModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Quick Add Product</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body py-2">
        <div class="form-group mb-2">
          <label class="small mb-1">Item Name</label>
          <input type="text" id="qa_name" class="form-control form-control-sm" autocomplete="off">
        </div>
        <div class="form-group mb-2">
          <label class="small mb-1">Units</label>
          <select id="qa_unit" class="form-control form-control-sm">
            <option value="">-</option>
            <option value="Bag">BAGS - Bag</option>
            <option value="Btl">BOTTLES - Btl</option>
            <option value="Box">BOX - Box</option>
            <option value="Bdl">BUNDLES - Bdl</option>
            <option value="Can">CANS - Can</option>
            <option value="Ctn">CARTONS - Ctn</option>
            <option value="Dzn">DOZENS - Dzn</option>
            <option value="Gm">GRAMMES - Gm</option>
            <option value="Kg">KILOGRAMS - Kg</option>
            <option value="Ltr">LITRE - Ltr</option>
            <option value="Mtr">METERS - Mtr</option>
            <option value="Ml">MILLILITRE - Ml</option>
            <option value="Nos">NUMBERS - Nos</option>
            <option value="Pac">PACKS - Pac</option>
            <option value="Prs">PAIRS - Prs</option>
            <option value="Pcs">PIECES - Pcs</option>
            <option value="Qtl">QUINTAL - Qtl</option>
            <option value="Rol">ROLLS - Rol</option>
            <option value="Sqf">SQUARE FEET - Sqf</option>
          </select>

        </div>
        <div class="form-group mb-2">
          <label class="small mb-1">Pieces / Pack</label>
          <input type="number" id="qa_pieces" class="form-control form-control-sm" min="1" value="1">
        </div>
        <div class="form-group mb-2">
          <label class="small mb-1">Purchase Price</label>
          <input type="number" id="qa_purchase" class="form-control form-control-sm" min="0" step="0.01" value="0">
        </div>
        <div class="form-group mb-0">
          <label class="small mb-1">Sale Price</label>
          <input type="number" id="qa_sale" class="form-control form-control-sm" min="0" step="0.01" value="0">
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" id="qa_submit" class="btn btn-primary btn-sm">Create New Product</button>
      </div>
    </div>
  </div>
</div>


<!-- ══ Feature 4: FIFO Stock Layers Modal ══ -->
<div class="modal fade" id="fifoLayersModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#1e40af;">
        <h6 class="modal-title text-white mb-0" style="font-size:.8rem;letter-spacing:1px;">
          <i class="fas fa-layer-group mr-1"></i> FIFO Stock Layers
        </h6>
        <button type="button" class="close text-white" data-dismiss="modal" style="opacity:.8;">&times;</button>
      </div>
      <div class="modal-body p-2">
        <div id="fifoLayersLoading" class="text-center py-4">
          <i class="fas fa-spinner fa-spin text-primary fa-2x"></i>
        </div>
        <table class="table table-sm table-bordered mb-0" id="fifoLayersTable" style="display:none;font-size:.78rem;">
          <thead style="background:#1e40af;color:#fff;">
            <tr>
              <th class="text-center" style="width:36px;">#</th>
              <th class="text-right">Qty</th>
              <th class="text-right">Purchase</th>
            </tr>
          </thead>
          <tbody id="fifoLayersTbody"></tbody>
          <tfoot id="fifoLayersFoot" style="display:none;">
            <tr style="background:#e8f0fa;font-weight:700;">
              <td colspan="2" class="text-right small">Total Qty</td>
              <td class="text-right" id="fifoTotalQty">—</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- ══ Serial Picker Modal (is_serial_tracked items) ══ -->
<div class="modal fade" id="serialPickerModal" tabindex="-1" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#7c2d12;">
        <h6 class="modal-title text-white mb-0" style="font-size:.8rem;letter-spacing:1px;">
          <i class="fas fa-barcode mr-1"></i> Select Serial — <span id="serialPickerProductName"></span>
        </h6>
        <button type="button" class="close text-white" data-dismiss="modal" style="opacity:.8;">&times;</button>
      </div>
      <div class="modal-body p-2">
        <input type="text" id="serialPickerSearch" class="form-control form-control-sm mb-2"
               placeholder="Search serial…" autocomplete="off">
        <div id="serialPickerLoading" class="text-center py-4">
          <i class="fas fa-spinner fa-spin text-primary fa-2x"></i>
        </div>
        <div id="serialPickerEmpty" class="text-muted text-center py-3" style="display:none;font-size:.8rem;"></div>
        <div id="serialPickerList" class="list-group" style="max-height:320px;overflow-y:auto;display:none;font-size:.8rem;"></div>
      </div>
    </div>
  </div>
</div>
<style>
  #serialPickerList,
  #serialPickerList .serial-pick-item,
  #serialPickerList .serial-pick-item * {
    color: #000 !important;
  }
  #serialPickerList .serial-pick-item .font-weight-bold {
    font-weight: 700 !important;
  }
  #serialPickerList .serial-pick-item.sp-hl {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #000 !important;
  }
</style>

{% if pos_type == "pharmacy" %}
<!-- ══ Feature 5: Expiry Batches Modal ══ -->
<div class="modal fade" id="expiryBatchModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:520px;">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#166534;">
        <h6 class="modal-title text-white mb-0" style="font-size:.8rem;letter-spacing:1px;">
          <i class="fas fa-pills mr-1"></i> Batch &amp; Expiry Layers
        </h6>
        <button type="button" class="close text-white" data-dismiss="modal" style="opacity:.8;">&times;</button>
      </div>
      <div class="modal-body p-2">
        <div class="d-flex mb-2" style="gap:6px;font-size:.72rem;">
          <span class="badge" style="background:#d1fae5;color:#065f46;padding:3px 8px;">Normal</span>
          <span class="badge" style="background:#fff7ed;color:#92400e;padding:3px 8px;">Short &lt;6mo</span>
          <span class="badge" style="background:#fef2f2;color:#dc2626;padding:3px 8px;">Expired</span>
        </div>
        <div id="expiryBatchLoading" class="text-center py-4">
          <i class="fas fa-spinner fa-spin text-success fa-2x"></i>
        </div>
        <table class="table table-sm table-bordered mb-0" id="expiryBatchTable" style="display:none;font-size:.77rem;">
          <thead style="background:#166534;color:#fff;">
            <tr>
              <th class="text-center" style="width:32px;">#</th>
              <th class="text-right">Qty</th>
              <th class="text-right">Purchase</th>
              <th>Batch</th>
              <th>Expiry</th>
            </tr>
          </thead>
          <tbody id="expiryBatchTbody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="modal fade" id="pibHistModal" tabindex="-1" aria-hidden="true" style="z-index:10500;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2 flex-column align-items-start">
        <div class="d-flex w-100 align-items-center justify-content-between">
          <h6 class="modal-title" id="pibHistTitle">Sale History</h6>
          <button type="button" class="close ml-2" data-dismiss="modal">&times;</button>
        </div>
        <div class="d-flex align-items-center flex-wrap mt-2" style="gap:8px;">
          <div class="d-flex align-items-center" style="gap:4px;">
            <label class="mb-0 small text-muted" style="white-space:nowrap;">From:</label>
            <input type="date" id="pibDateFrom"
                   class="form-control form-control-sm"
                   style="max-width:140px;">
          </div>
          <div class="d-flex align-items-center" style="gap:4px;">
            <label class="mb-0 small text-muted" style="white-space:nowrap;">To:</label>
            <input type="date" id="pibDateTo"
                   class="form-control form-control-sm"
                   style="max-width:140px;">
          </div>
          <button type="button" id="pibFilterBtn"
                  class="btn btn-primary btn-sm">
            <i class="fas fa-search mr-1"></i>Search
          </button>
        </div>
      </div>
      <div class="modal-body p-2" id="pibHistBody" style="max-height:420px;overflow-y:auto;">
        <div class="text-center p-4 text-muted">
          <i class="fas fa-spinner fa-spin fa-2x"></i>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="cfiModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header py-2">
      <h6 class="modal-title">Last Invoices</h6>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
    </div>
    <div class="modal-body p-2">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <small class="text-muted" id="cfiHint">Showing latest 10</small>
        <button type="button" class="btn btn-sm btn-outline-primary" id="cfiShowAll">Show All</button>
      </div>
      <div class="table-responsive" style="max-height: 360px; overflow:auto;">
        <table class="table table-sm table-hover mb-0" id="cfi_table">
          <thead class="thead-light">
            <tr>
              <th>Invoice</th>
              <th>Type</th>
              <th>Name</th>
              <th>Phone</th>
              <th>Address</th>
              <th>Voucher #</th>
              <th>Date</th>
              <th class="text-center">Action</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <div class="modal-footer py-2">
      <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
    </div>
  </div></div>
</div>


<!-- ── Quick Payment Dialog ── -->
<div class="modal fade" id="quickPayModal" tabindex="-1" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content" style="border-radius:10px;overflow:hidden;">

      <div class="modal-header py-2 px-3" style="background:#1e293b;border:none;">
        <h6 class="modal-title text-white mb-0">
          <i class="fas fa-cash-register mr-2"></i>Quick Payment
        </h6>
      </div>

      <div class="modal-body px-3 py-3">
        <div class="text-center p-3 mb-3 rounded"
             style="background:#eff6ff;border:2px solid #bfdbfe;">
          <div class="text-muted mb-1" style="font-size:.72rem;letter-spacing:.5px;">BILL TOTAL</div>
          <div id="qpBillTotal"
               style="font-size:2.4rem;font-weight:800;color:#1d4ed8;line-height:1;">0.00</div>
        </div>

        <div class="form-group mb-2">
          <label class="small text-muted mb-1">Flat Discount</label>
          <input type="number" id="qpFlatDiscount" class="form-control"
                 style="font-size:1.1rem;text-align:right;font-weight:700;"
                 step="0.01" min="0" placeholder="0.00" autocomplete="off">
        </div>

        <div class="form-group mb-2">
          <label class="small text-muted mb-1">Received Amount</label>
          <input type="number" id="qpReceived" class="form-control"
                 style="font-size:1.6rem;text-align:right;font-weight:700;height:auto;padding:.5rem .75rem;"
                 step="0.01" min="0" placeholder="0.00" autocomplete="off">
        </div>

        <div id="qpChangeRow" class="text-center mt-2 py-2 rounded"
             style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;">
          <span class="text-muted small" id="qpChangeLabel">Change:</span>&nbsp;
          <span id="qpChangeAmt"
                style="font-size:1.4rem;font-weight:700;color:#16a34a;">0.00</span>
        </div>
      </div>

      <div class="modal-footer py-2 px-3" style="border-top:1px solid #e2e8f0;">
        <button type="button" id="qpCancelBtn" class="btn btn-light btn-sm">
          <i class="fas fa-times mr-1"></i>Cancel
          <span class="badge badge-secondary ml-1" style="font-size:.62rem;">ESC</span>
        </button>
        <button type="button" id="qpSaveBtn"
                class="btn btn-success" style="flex:1;margin-left:.5rem;">
          <i class="fas fa-check-circle mr-1"></i>Save &amp; Print
          <span class="badge ml-1"
                style="background:rgba(255,255,255,.25);color:#fff;font-size:.62rem;">Enter</span>
        </button>
      </div>

    </div>
  </div>
</div>


<!-- SECRET PROFIT MODAL -->
<div class="modal fade" id="secretProfitModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title text-white mb-0" style="font-size:.8rem;letter-spacing:2px;">
          ⚙ Invoice Licence Details
        </h6>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body p-3">
        <div id="secret-licence-box">
          <div id="secret-licence-title">Invoice Licence Details</div>
          <div id="secret-licence-code">—</div>
        </div>
        <div class="table-responsive mt-2" style="max-height:280px;overflow-y:auto;">
          <table class="table table-sm table-bordered mb-0" id="secret-profit-table" style="font-size:.76rem;">
            <thead>
              <tr><th>Item</th><th class="text-right">Qty</th>
                  <th class="text-right">Sale/U</th><th class="text-right">FIFO/U</th>
                  <th class="text-right">LISC#</th></tr>
            </thead>
            <tbody id="secret-profit-tbody"></tbody>
            <tfoot>
              <tr style="background:#e8f0fa;font-weight:700;">
                <td colspan="4" class="text-right">Gross Val</td>
                <td class="text-right" id="secret-gross">—</td>
              </tr>
              <tr style="background:#1a2f4a;color:#fff;font-weight:700;">
                <td colspan="4" class="text-right">Net Val</td>
                <td class="text-right" id="secret-net">—</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="mt-2 text-center" style="font-size:.68rem;color:#aaa;">
          Ctrl+U se band karein &nbsp;|&nbsp; Invoice par show nahi hota
        </div>
      </div>
    </div>
  </div>
</div>



    <!-- ALT+P PRINT TEMPLATE PICKER — Professional Design -->
    <div class="modal fade" id="altPrintModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" style="max-width:560px;">
        <div class="modal-content">
 
          <!-- Header -->
          <div id="ap-modal-header">
            <div style="display:flex;align-items:center;">
              <div class="ap-icon-wrap">
                <i class="fas fa-print" style="font-size:15px;color:#555;"></i>
              </div>
              <div>
                <p class="ap-title">Print Template</p>
                <p class="ap-sub">Select a template to save &amp; print</p>
              </div>
            </div>
            <div style="display:flex;align-items:center;">
              <span class="ap-badge">Alt+P</span>
              <button class="ap-close-btn" data-dismiss="modal" aria-label="Close">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
 
          <!-- Keyboard hint bar -->
          <div id="ap-kbd-bar">
            <span class="ap-kbd-icon"><i class="fas fa-keyboard"></i></span>
            <kbd>&larr;</kbd><kbd>&rarr;</kbd><kbd>&uarr;</kbd><kbd>&darr;</kbd>
            <span class="ap-ktext">Navigate</span>
            <kbd>Enter</kbd><span class="ap-ktext">Print</span>
            <kbd>Esc</kbd><span class="ap-ktext">Close</span>
          </div>
 
          <!-- Template grid (filled by JS apRenderGrid) -->
          <div id="ap-tpl-container"></div>
 
          <!-- Loading state -->
          <div id="ap-loading">
            <i class="fas fa-spinner fa-spin fa-2x" style="color:#2d5f8a;"></i>
            <p>Saving &amp; printing…</p>
          </div>
 
          <!-- Footer -->
          <div id="ap-footer">
            <span id="ap-hint">Choose a template above</span>
            <button id="ap-cancel-btn" data-dismiss="modal">Cancel</button>
          </div>
 
        </div>
      </div>
    </div>



{% endblock %}

{% block javascripts %}

<script>

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  1 — CONSTANTS & GLOBAL VARIABLES                            ║
  // ╚══════════════════════════════════════════════════════════════╝

  var URL_VARIANTS_FOR_PRODUCT = "{% url 'sales:ajax_variants_for_product' %}";
  const csrftoken       = $('[name=csrfmiddlewaretoken]').val();
  const settingsDict    = {{ settings_dict_json|safe }};
  {% if 'custom_rate_allow' in allowed_features %}
    const saleRateLock    = true;
  {% else %}
    const saleRateLock    = false;
  {% endif %}
  var initialSale       = {{ initial_sale_json|default:'null'|safe }};
  var skippedItems      = {{ skipped_items_json|default:'[]'|safe }};  // Point 3

  // ── Server-side validation errors (messages.error) → SweetAlert ──
  // sales_add_view POST se jab bhi messages.error(...) + redirect hota hai
  // (serial validation, discount-vs-profit guard, wagera), us error ko yahan
  // Swal se dikha dete hain — baaki app mein jo pattern already chal raha hai.
  {% if messages %}
    $(function () {
      {% for message in messages %}
        Swal.fire({
          icon: 'error',
          title: 'Save Failed',
          text: '{{ message|escapejs }}',
          confirmButtonText: 'OK'
        });
      {% endfor %}
    });
  {% endif %}
  const sale            = { products: [], sub:0, grand:0 };
  var _editLoadComplete = false;
  let isInvoiceSubmitting = false;
  var INVOICE_URL_BASE = "/invoices/invoice-templates/a1/";
  var vehHistReqId = 0;
  const IS_SUB_TENANT = {{ is_sub_tenant|yesno:"true,false" }};
  const SUB_TENANT_ID = {{ sub_tenant_id|default:"null" }};
  const LOCKED_SPEC_A_IDS = {{ locked_spec_a_ids|default:"[]"|safe }};
  const SPEC_A_MASTER = {{ spec_a_master_json|default:"[]"|safe }};
  const AUTO_SPEC_A_ID = "{{ auto_spec_a_id }}";
  const LOCKED_WAREHOUSE_NAME = "{{ locked_warehouse|default:''|escapejs }}";
  const FBR_ENABLED = {{ fbr_enabled|yesno:"true,false" }};
  var BANK_ACCOUNTS = [
    {% for bank in bank_accounts %}
      { id: {{ bank.id }}, name: "{{ bank.name|escapejs }}" }{% if not forloop.last %},{% endif %}
    {% endfor %}
  ];
  var bankRowCounter = 1;
  var chequeRowCounter = 0;
  let __lastOpenSelect2 = null;
  let __pointerDown = false;

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  2 — UTILITY / HELPER FUNCTIONS                              ║
  // ╚══════════════════════════════════════════════════════════════╝

  function digitsOnly(s){ return (s||'').replace(/\D+/g,''); }

  function fmt2(n){
    const x = Number(n);
    if (isNaN(x)) return '0.00';
    return x.toLocaleString(undefined,{minimumFractionDigits:2, maximumFractionDigits:2});
    }

  function spEsc(s){
    return String(s ?? '').replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
    }

  function spTitleCase(s){
    s = String(s ?? '').trim().toLowerCase().replace(/\s+/g,' ');
    // space, hyphen, slash, apostrophe ke baad aane wala letter Capital
    return s.replace(/(^|[\s\-\/'`])([a-z])/g, (m, sep, ch) => sep + ch.toUpperCase());
    }

  function spMoney(n){
    const x = Number(n);
    if (isNaN(x)) return '0.00';
    return x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
  
  function formatNumber(num) {
    if (num === null || num === undefined) return '0';
    const n = parseFloat(num);
    if (isNaN(n)) return '0';
    if (n === Math.floor(n)) {
      return Math.floor(n).toLocaleString();
    }
    return n.toFixed(1).replace(/\.0$/, '');
    }

  function toIntSafe(x){ if(typeof x==='number') return isNaN(x)?0:(x|0); if(!x) return 0; var m=String(x).match(/(\d+)/); return m?parseInt(m[1],10):0; }

  // Feature 1: "1.12" @ ppp=24 → { qty:1, pcs:12, totalUnits:1.5 }
  function parsePcsAwareQty(rawVal, ppp) {
    ppp = parseInt(ppp) || 1;
    var s = String(rawVal || '').trim().replace(',', '.');
    if (!s || s === '.') return { qty:0, pcs:0, totalUnits:0 };
    var dotIdx = s.indexOf('.');
    if (dotIdx === -1) {
      var q = parseInt(s, 10) || 0;
      return { qty:q, pcs:0, totalUnits:q };
    }
    var cartonPart = parseInt(s.substring(0, dotIdx) || '0', 10) || 0;
    var pcsPart    = parseInt(s.substring(dotIdx + 1)  || '0', 10) || 0;
    var extraC = Math.floor(pcsPart / ppp);
    var remPcs = pcsPart % ppp;
    var totalC = cartonPart + extraC;
    return { qty: totalC, pcs: remPcs, totalUnits: totalC + (remPcs / ppp) };
  }

// 1.5 @ ppp=24 → "1.12"  |  0.25 @ ppp=24 → "0.6"  |  2.0 → "2"
  function formatPcsAwareQty(totalUnits, ppp) {
    ppp = parseInt(ppp) || 1;
    if (ppp <= 1) return String(Math.round(totalUnits * 1000) / 1000);
    var cartons = Math.floor(totalUnits);
    var pcs     = Math.round((totalUnits - cartons) * ppp);
    if (pcs >= ppp) { cartons += 1; pcs = 0; }  // rounding edge case
    return pcs > 0 ? (cartons + '.' + pcs) : String(cartons);
  }


  function isEnterOrTab(e) {
    const k = e.key || '';
    return e.which === 13 || e.which === 9 || k === 'Enter' || k === 'Tab';
    }

  function scrollTableLeftOrigin() {
    $('.table-responsive').scrollLeft(0);
    }

  function isMobile() {
    return window.matchMedia('(max-width: 576px)').matches;
    }

  function ensureSelect2(sel){
    var $el = $(sel);
    if ($el.length && !$el.data('select2')) { $el.select2({ width: '100%' }); }
    return $el;
    }

  function uuidv4(){
    // Simple UUID v4 (browser-safe)
    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,c=>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c/4).toString(16)
    );
    }

  function rowEnsureUID($row){
    var $uid = $row.find('.line-uid-input');
    if (!$uid.val()) $uid.val(uuidv4());
    return $uid.val();
    }

  // ── Info Bar state ──
  var _pibRowObj = null;

  function updateInfoBar(rowObj) {
    _pibRowObj = rowObj || null;
    if (!rowObj || !rowObj.code) {
      $('#pibPills').hide(); $('#pibEmpty').show(); return;
    }
    $('#pibEmpty').hide(); $('#pibPills').show();

    $('#pibName').text(spTitleCase(rowObj.name || rowObj.code || ''));

    var stk = +(rowObj.present_stock || 0);
    $('#pibStock b').text(formatNumber(stk));
    $('#pibStock').toggleClass('zero', stk <= 0);

    $('#pibBuy b').text(fmt2(rowObj.purchase_price || 0));
    $('#pibSp b').text(fmt2(rowObj._l_sale_price || rowObj.price || 0));

    var ws = +(rowObj.whole_sale_price || 0);
    if (ws > 0) { $('#pibWs b').text(fmt2(ws)); $('#pibWs').show(); }
    else { $('#pibWs').hide(); }

    var ppp = +(rowObj.p_per_pack || 1);
    if (ppp > 1) { $('#pibPpp b').text(ppp); $('#pibPpp').show(); }
    else { $('#pibPpp').hide(); }

    // Point 4: list_rate (MRP)
    var lr = +(rowObj.list_rate || 0);
    if (lr > 0) { $('#pibLr b').text(fmt2(lr)); $('#pibLr').show(); }
    else { $('#pibLr').hide(); }

    var co = rowObj.company || '';
    if (co) { $('#pibCo').text(co).show(); } else { $('#pibCo').hide(); }
 
    // Average chip: sirf tab show hoga jab product select ho
    if (!rowObj || !rowObj.code) { $('#pibAvg').hide(); }

    // Feature 5: Pharmacy expiry chip
    _updateExpiryChip(rowObj);
    }

  function updateLastRatePill(rate) {
    if (rate != null && +rate > 0) {
      $('#pibLast b').text(fmt2(rate));
      $('#pibLast').addClass('active');
    } else {
      $('#pibLast b').text('—');
      $('#pibLast').removeClass('active');
    }
    }

  // Backward-compat wrapper (existing calls kaam karte rahen)
  function setHudStockPrice(stockOrRate, price, isHistory) {
    if (isHistory) { updateLastRatePill(stockOrRate); }
    }

  function getSaleItems(){ return window.sale_items || {}; }

  function toIntSafe(x){
    if (typeof x === 'number') return isNaN(x) ? 0 : (x|0);
    if (!x) return 0;
    var s = String(x);
    var m = s.match(/(\d+)/);  // pick first digit run anywhere
    return m ? parseInt(m[1], 10) : 0;
    }

  function getCustomerId(){
    var si = getSaleItems();
    var cid = toIntSafe(si && si.customer ? si.customer : 0);

    if (!cid) {
      var $sc = $('#searchbox_customers');
      if ($sc.length) {
        var v = $sc.val();
        cid = toIntSafe(v);
        if (!cid && $sc.select2) {
          try {
            var d = $sc.select2('data');
            if (d && d.length) cid = toIntSafe(d[0].id);
          } catch(e){}
        }
      }
    }
    if (!cid) {
      var $c = $('#customer');
      if ($c.length) {
        var v2 = $c.val();
        cid = toIntSafe(v2);
        if (!cid && $c.select2) {
          try {
            var d2 = $c.select2('data');
            if (d2 && d2.length) cid = toIntSafe(d2[0].id);
          } catch(e){}
        }
      }
    }
    return cid || 0;  // cash => 0
    }

  function getSaleType(){
    var si = getSaleItems();
    var st = (si && si.saletype) ? ('' + si.saletype) : '';

    if (!st) {
      var $sel = $('#saletype, #sale_type');           // support multiple ids
      if ($sel.length) st = $sel.val() || st;
      if (!st) {
        var $chk = $('input[name="saletype"]:checked, input[name="sale_type"]:checked');
        if ($chk.length) st = $chk.val() || st;
      }
    }

    st = (st || '').toString().trim().toLowerCase();
    // normalize to detect credit broadly
    if (st.indexOf('credit') >= 0) return 'credit';    // 'credit', 'credit_sale', 'credit_return'
    if (st === 'customer' || st === 'customer_sale' || st === 'customer-sale') return 'credit';
    if (st === '1' || st === 'cr') return 'credit';
    if (st === 'cash_return') return 'cash';
    return st;
    }

  function isCreditType(st){
    st = (st || '').toLowerCase();
    return (st === 'credit' || st.indexOf('credit') >= 0 || st === '1' || st === 'cr' || st === 'customer' || st === 'customer_sale' || st === 'customer-sale');
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  3 — SALE TYPE & MODE MANAGEMENT                             ║
  // ║  Cash/Credit/Vendor/Return/Estimate mode switching           ║
  // ╚══════════════════════════════════════════════════════════════╝

  function isReturnMode() {
      const st = $('#sale_type').val();
      return st === 'cash_return' || st === 'credit_return' || st === 'vendor_return';
    }

  function isVendorMode() {
      const st = $('#sale_type').val();
      return st === 'vendor_sale' || st === 'vendor_return';
    }

  function isEstimateMode() {
    return $('#sale_type').val() === 'estimate';
    }
  
  function isCreditMode() {
    const st = $('#sale_type').val();
    return st === 'credit' || st === 'credit_return';
    }
  
  function applySaleTypeUX(){
      var st = ($('#sale_type').val() || '').toLowerCase();

      var $custSel = $('#searchbox_customers');
      var $custGroup = $('#customer_block');
      if (!$custGroup.length) {
          $custGroup = $custSel.closest('.form-group');
      }
      
      var $vendSel = $('#searchbox_vendors');
      var $vendGroup = $('#vendor_block');
      
      var $nameGroup = $('#cash_customer_name').closest('.form-group');
      var $phoneGroup = $('#cash_customer_phone').closest('.form-group');
      var $addressGroup = $('#cash_customer_address').closest('.form-group');
      var $voucherGroup = $('#cash_customer_voucher_no').closest('.form-group');

      // Reset all groups first
      $custGroup.addClass('d-none').removeClass('d-flex');
      $vendGroup.addClass('d-none').removeClass('d-flex');
      $nameGroup.addClass('d-none');

      // CASH / ESTIMATE modes:
      if (st === 'cash' || st === 'cash_return' || st === 'estimate'){
          if ($custSel.data('select2')) { try { $custSel.select2('close'); } catch(_){} }
          if ($vendSel.data('select2')) { try { $vendSel.select2('close'); } catch(_){} }
          
          $nameGroup.removeClass('d-none');
      }
      // CREDIT modes:
      else if (st === 'credit' || st === 'credit_return'){
          if ($vendSel.data('select2')) { try { $vendSel.select2('close'); } catch(_){} }
          
          $custGroup.removeClass('d-none').addClass('d-flex');
      }
      // VENDOR modes (NEW):
      else if (st === 'vendor_sale' || st === 'vendor_return'){
          if ($custSel.data('select2')) { try { $custSel.select2('close'); } catch(_){} }
          
          $vendGroup.removeClass('d-none').addClass('d-flex');
      }

      {% if settings_dict.show_name_and_phone_inputs %}
          $nameGroup.removeClass('d-none');
          $phoneGroup.removeClass('d-none');
          $addressGroup.removeClass('d-none');
          $voucherGroup.removeClass('d-none');
      {% else %}
          $nameGroup.addClass('d-none');
          $phoneGroup.addClass('d-none');
          $addressGroup.addClass('d-none');
          $voucherGroup.addClass('d-none');
      {% endif %}
    }

  function applyModeUI() {
    const ret = isReturnMode();
    const est = isEstimateMode();      
    const vend = isVendorMode();

    // Banner for returns
    $('#modeBanner').toggle(ret);

    // Vendor mode banner (optional - add if you want)
    // $('#vendorModeBanner').toggle(vend);

    // Received field placeholder
    if (ret) {
        $('#total_received').attr('placeholder', 'Refund Paid (F1)');
    } else {
        $('#total_received').attr('placeholder', 'Cash Received (F1)');
    }

    // Payment/bank area in Estimate -> hidden/disabled
    const $bankSel = $('#bank_selection');
    if (est) {
        $bankSel.prop('disabled', true);
        $('#total_received').prop('disabled', true).val('');
    } else {
        $bankSel.prop('disabled', false);
        $('#total_received').prop('disabled', false);
    }
    
    applySaleTypeUX();
    }

  function enforceDomainRestrictions() {
    const restrictReturn = $('#restrict_to_return').val() === 'True' || $('#restrict_to_return').val() === 'true';
    const restrictSale = $('#restrict_to_sale').val() === 'True' || $('#restrict_to_sale').val() === 'true';
    const restrictEstimate = $('#restrict_to_estimate').val() === 'True' || $('#restrict_to_estimate').val() === 'true';
    const restrictVendorSale = $('#restrict_to_vendor_sale').val() === 'True' || $('#restrict_to_vendor_sale').val() === 'true';
    const restrictVendorReturn = $('#restrict_to_vendor_return').val() === 'True' || $('#restrict_to_vendor_return').val() === 'true';
    const forced = $('#forced_saletype').val();

    // Disable options based on restrictions
    if (restrictReturn) {
        $('#sale_type option').each(function(){
            const v = $(this).val();
            if (v !== 'cash_return' && v !== 'credit_return' && v !== 'vendor_return') {
                $(this).prop('disabled', true);
            }
        });
    } else if (restrictSale) {
        $('#sale_type option').each(function(){
            const v = $(this).val();
            if (v !== 'cash' && v !== 'credit' && v !== 'vendor_sale') {
                $(this).prop('disabled', true);
            }
        });
    } else if (restrictEstimate) {
        $('#sale_type option').each(function(){
            const v = $(this).val();
            if (v !== 'estimate') $(this).prop('disabled', true);
        });
    } else if (restrictVendorSale) {
        // Lock to vendor_sale only
        $('#sale_type option').each(function(){
            const v = $(this).val();
            if (v !== 'vendor_sale') $(this).prop('disabled', true);
        });
    } else if (restrictVendorReturn) {
        // Lock to vendor_return only
        $('#sale_type option').each(function(){
            const v = $(this).val();
            if (v !== 'vendor_return') $(this).prop('disabled', true);
        });
    }

    // Determine allowed options
    var allowed = null;
    if (restrictReturn) allowed = ['cash_return', 'credit_return', 'vendor_return'];
    else if (restrictSale) allowed = ['cash', 'credit', 'vendor_sale'];
    else if (restrictEstimate) allowed = ['estimate'];
    else if (restrictVendorSale) allowed = ['vendor_sale'];
    else if (restrictVendorReturn) allowed = ['vendor_return'];

    // Set value
    if (forced) {
        $('#sale_type').val(forced);
    } else if (allowed) {
        var curr = $('#sale_type').val();
        if (allowed.indexOf(curr) === -1) {
            $('#sale_type').val(allowed[0]);
        }
    }

    applyModeUI();

    if (typeof window.applySaleTypeUX === 'function') {
        window.applySaleTypeUX();
    }

    $('#sale_type').trigger('change');
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  4 — COLUMN VISIBILITY & LAYOUT                              ║
  // ║  Code/VCode column hide/show, table column splitting         ║
  // ╚══════════════════════════════════════════════════════════════╝

  function applyCodeColumnVisibility() {
    const shouldHideCode = (!settingsDict.show_code) || ((settingsDict.barcode === "0") && isMobile());
    $('#table_products').toggleClass('hide-code', shouldHideCode);
    const shouldHideVCode = (!settingsDict.show_variant_code) || (isMobile());
        $('#table_products').toggleClass('hide-vcode', shouldHideVCode);
    }

  function splitCodeName50IfNeeded() {
    // only for barcode="2" and desktop/tablet
    if (settingsDict.barcode !== "2" || window.matchMedia('(max-width: 576px)').matches) {
      $('#table_products col.col-code').css('width', '');
      $('#table_products col.col-name').css('width', '');
      return;
    }

    const $table = $('#table_products');
    const tableW = $table.width() || 0;
    if (!tableW) return;

    const $colCode   = $table.find('col.col-code');
    const $colName   = $table.find('col.col-name');
    const $colVCode  = $table.find('col.col-vcode');       // may be hidden

    // Compute the width taken by all visible columns except code+name
    let other = 0;
    $table.find('thead th').each(function(){
      const i = $(this).index();         // header index
      // map index -> col class using the colgroup
      const $col = $table.find('col').eq(i);
      if ($col.is($colCode) || $col.is($colName)) return;
      if ($col.is(':visible')) {
        other += $(this).outerWidth() || 0;
      }
    });

    // leftover goes primarily to NAME so it remains the widest
    const leftover = Math.max(0, tableW - other);
    const codeW    = parseInt($colCode.css('width')) || 100; // keep code fixed(ish)
    const vcodeW   = ($colVCode.length && $colVCode.is(':visible')) ? (parseInt($colVCode.css('width'))||100) : 0;

    // whatever remains after code(+vcode) goes to name
    const nameW = Math.max(140, leftover - codeW - vcodeW);

    $colName.css('width', nameW + 'px');
    // keep code/vcode as declared in CSS/colgroup
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  5 — SELECT2 UTILITIES                                       ║
  // ║  Select2 open/close helpers, vendor init                     ║
  // ╚══════════════════════════════════════════════════════════════╝

  function closeAnyOpenSelect2(opts){
    opts = opts || {};
    const blur = (opts.blur !== false); // default true

    try {
      // 1) Close the last opened select2 (fast path)
      if (__lastOpenSelect2 && $(__lastOpenSelect2).data('select2')) {
        $(__lastOpenSelect2).select2('close');
      }

      // 2) Defensive: close any still-open container (ONLY open ones)
      $('.select2-container--open').each(function () {
        const $sel = $(this).prev('select.select2-hidden-accessible');
        if ($sel.length) { try { $sel.select2('close'); } catch(e) {} }
      });

    } catch(e) {}

    if (blur) {
      try {
        const el = document.activeElement;
        if (el && el.classList && el.classList.contains('select2-search__field')) {
          el.blur();
        }
      } catch(e) {}
    }

    if (!$('.select2-container--open').length) __lastOpenSelect2 = null;
    }
  
  function initVendorSelect2() {
    if ($('#searchbox_vendors').data('select2')) return; // Already initialized
      $('#searchbox_vendors').select2({
          theme: 'bootstrap4',
          width: '100%',
          placeholder: 'Search vendor…',
          minimumInputLength: 1,
          dropdownAutoWidth: true,
          dropdownCssClass: 'sp-dd-wide',
          ajax: {
              url: '{% url "vendors:get_vendors" %}',  // Make sure this URL exists
              type: 'POST',
              delay: 250,
              headers: { 'X-CSRFToken': csrftoken },
              data: p => ({ term: p.term }),
              processResults: safeProcessResults
          },
          templateResult: function(item) {
              if (!item.id) return item.text;
              const name = spTitleCase(item.name || item.text || '');
              const balance = (item.balance != null ? item.balance : '');
              return `
                  <div class="sp-opt">
                      <div class="sp-name">${spEsc(name)}</div>
                      <div class="sp-meta">
                          <span class="sp-stock">Balance: ${spMoney(balance)}</span>
                      </div>
                  </div>
              `;
          },
          escapeMarkup: function(m) { return m; }
      })
      .on('select2:open', () => {
          setTimeout(() => {
              const fld = document.querySelector('.select2-container--open .select2-search__field');
              fld && fld.focus();
          }, 0);
      })
      .on('select2:select', e => {
          const d = e.params.data;
          $('#due_balance').text((d.balance || 0).toFixed(2));
          
          // Focus on product entry
          const $rows = $('#table_products tbody tr').not('.template-row');
          if ($rows.length) {
              focusFirstFieldForRow($rows.last());
          } else {
              const $new = addRow();
              focusFirstFieldForRow($new);
          }
          updateRemaining();
      });
    }

  function safeProcessResults(data) {
    const results = Array.isArray(data) ? data 
          : (data && Array.isArray(data.results)) ? data.results 
          : (data && Array.isArray(data.data)) ? data.data
          : [];
      return { results: results };
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  6 — FOCUS & NAVIGATION MANAGEMENT                           ║
  // ║  Row focus, Enter chaining, arrow keys, empty row detection  ║
  // ╚══════════════════════════════════════════════════════════════╝

  function __isRowEmpty($row){
    const rowObj = $row.data('rowObj') || {};
    const hasProduct = !!(rowObj.id || rowObj.code || ($row.find('.search-product').val() || ''));
    const ppp = +($row.find('.p-pack-input').val() || rowObj.p_per_pack || 1) || 1;
    let saleUnits;
    if (settingsDict.pieces_wise_sale) {
      const _pce = +($row.find('.pcs-input').val() || 0);
      saleUnits = _pce / (ppp > 0 ? ppp : 1);
    } else {
      const q  = +($row.find('.qty-input').val() || 0);
      const pc = settingsDict.show_pcs ? +($row.find('.pcs-input').val() || 0) : 0;
      saleUnits = q + (pc / (ppp > 0 ? ppp : 1));
    }
    return !hasProduct && saleUnits <= 0;
    }

  function __findEmptyTailRow(){
    const $rows = $('#table_products tbody tr').not('.template-row');
    if (!$rows.length) return null;
    const $last = $rows.last();
    return __isRowEmpty($last) ? $last : null;
    }

  function __focusEmptyTailIfAny(){
    const $empty = __findEmptyTailRow();
    if (!$empty) return false;
    focusFirstFieldForRow($empty);
    if (isMobile() && settingsDict.barcode === "0") {
      setTimeout(scrollTableLeftOrigin, 0);
    }
    return true;
    }

  function __isLastEditableInRow($row, el){
    const $inputs = $row.find('input:visible, select:visible')
                        .not('.template-row input, .template-row select');
    const idx = $inputs.index(el);
    return idx === $inputs.length - 1;
    }

  function goToProductEntry(){ ensureNextRowFocusOrCreate(); }

  function ensureNextRowFocusOrCreate() {
    if (ensureNextRowFocusOrCreate._lock) return;
    ensureNextRowFocusOrCreate._lock = true;
    setTimeout(() => (ensureNextRowFocusOrCreate._lock = false), 120);

    const $rows = $('#table_products tbody tr').not('.template-row');

    // No rows at all → create first
    if (!$rows.length) {
      const $new = addRow();
      focusFirstFieldForRow($new);
      return;
    }

    // 1) If tail has an empty row, just focus it (DON'T create another)
    if (__focusEmptyTailIfAny()) return;

    // 2) Otherwise, guard stock/emptiness of the current last row before adding
    const $last = $rows.last();
    if (!canCreateNextRow($last)) return;
    // 3) Create the new row and focus as usual
    const $new = addRow();
    focusFirstFieldForRow($new);
    if (isMobile() && settingsDict.barcode === "0") {
      setTimeout(scrollTableLeftOrigin, 0);
    }
    }

  function focusFirstFieldForRow($row) {
    // const hideCode = (settingsDict.barcode === "0") && isMobile();
    if (!settingsDict.show_code) {
      $row.find('.search-product').select2('open');
      setTimeout(() => {
        document.querySelector('.select2-container--open .select2-search__field')?.focus();
      }, 0);
      return;
    }
    const hideCode = (settingsDict.barcode === "0") && isMobile();

    // Mobile + barcode=0 → Name select2
    if (hideCode) {
      $row.find('.search-product').select2('open');
      setTimeout(() => {
        document.querySelector('.select2-container--open .select2-search__field')?.focus();
      }, 0);
      return;
    }

    switch (settingsDict.barcode) {
      case "0": {
        // Always Name select2
        $row.find('.search-product').select2('open');
        setTimeout(() => {
          document.querySelector('.select2-container--open .select2-search__field')?.focus();
        }, 0);
        break;
      }
      case "1": {
        // Plain code input
        const $ci = $row.find('.code-input');
        $ci.focus(); $ci[0]?.select?.();
        requestAnimationFrame(() => { if(!$ci.is(':focus')) { $ci.focus(); $ci[0]?.select?.(); } });
        setTimeout(() => { if(!$ci.is(':focus')) { $ci.focus(); $ci[0]?.select?.(); } }, 120);
        break;
      }
      case "2": {
        // Code as select2 (our injected .code-select)
        const $codeSel = $row.find('.code-select');
        if ($codeSel.length) {
          $codeSel.select2('open');
          setTimeout(() => {
            document.querySelector('.select2-container--open .select2-search__field')?.focus();
          }, 0);
        } else {
          // fallback to plain input if select not yet attached
          const $ci = $row.find('.code-input');
          $ci.focus(); $ci[0]?.select?.();
        }
        break;
      }
      default: {
        // // Fallback: behave like barcode=1
        // const $ci = $row.find('.code-input');
        // $ci.focus(); $ci[0]?.select?.();

        const $ci = $row.find('.code-input');
        $ci.focus(); $ci[0]?.select?.();
        requestAnimationFrame(() => { if(!$ci.is(':focus')) { $ci.focus(); $ci[0]?.select?.(); } });
        setTimeout(() => { if(!$ci.is(':focus')) { $ci.focus(); $ci[0]?.select?.(); } }, 120);

      }
    }
    }

  function focus_management_on_page_load(row) {
    // 2b) Name → Address → Voucher → Product row (Enter chaining)
    $('#cash_customer_name')
      .off('keydown.cashName')
      .on('keydown.cashName', function(e){ if (e.key==='Enter'){ e.preventDefault(); $('#cash_customer_address').focus().select(); }});
    $('#cash_customer_address')
      .off('keydown.cashAddr')
      .on('keydown.cashAddr', function(e){ if (e.key==='Enter'){ e.preventDefault(); ensureNextRowFocusOrCreate(); }});
    $('#cash_customer_voucher_no')
      .off('keydown.cashVouch')
      .on('keydown.cashVouch', function(e){ if (e.key==='Enter'){ e.preventDefault(); ensureNextRowFocusOrCreate(); }});

      {% if settings_dict.business_type == 'general' %}
        document.addEventListener('DOMContentLoaded', () => {
          const sel = document.getElementById('sale_type');
          if (sel && sel.value !== 'credit') {
            sel.value = 'credit';
            sel.dispatchEvent(new Event('change'));
          }
        });
      {% endif %}
    
      if (settingsDict.business_type === 'distribution') {

        var last_sale_area_id = ($('#last_sale_area_id').val() || '').toString().trim();
        var last_sale_area_name = ($('#last_sale_area_name').val() || '').toString().trim();

        
        if (!last_sale_area_id) {
          $('#sale_area').select2('open');
          setTimeout(() => {
            document.querySelector('.select2-container--open .select2-search__field')?.focus();
          }, 0);
        }else{
          window.selectedAreaId = last_sale_area_id;
          const area_txt = last_sale_area_name || (last_sale_area_id);
          const area_opt = new Option(area_txt, last_sale_area_id, true, true);
          ensureSelect2('#sale_area');
          $('#sale_area').append(area_opt).trigger('change.select2');
          $('#searchbox_customers').select2('open');
          setTimeout(() => {
            document.querySelector('.select2-container--open .select2-search__field')?.focus();
          }, 0);
        }

      } else if (settingsDict.business_type === 'general'){
        $('#searchbox_customers').select2('open');
        setTimeout(() => {
          document.querySelector('.select2-container--open .select2-search__field')?.focus();
        }, 0);
      }
      else {
        setTimeout(function(){
          focusFirstFieldForRow(row);
        }, 60);
      }
    };
  
  $(function(){ // Table product short keys
    $('#table_products').off('focus.selText')
      .on('focus.selText', 'input.form-control', function(){ this.select(); });

    // Left/Right
    $('#table_products').off('keydown.lrNav')
      .on('keydown.lrNav', 'input:visible, select:visible', function(e){
        const LEFT=37, RIGHT=39;
        if (e.which !== LEFT && e.which !== RIGHT) return;
        e.preventDefault();
        const $controls = $('#table_products')
          .find('input:visible, select:visible')
          .not('.template-row input, .template-row select');
        const idx = $controls.index(this);
        const targetIdx = (e.which === RIGHT) ? idx+1 : idx-1;
        if (targetIdx>=0 && targetIdx<$controls.length) $controls.eq(targetIdx).focus();
      });

    // Up/Down
    $('#table_products').off('keydown.udNav')
      .on('keydown.udNav', 'input:visible, select:visible', function(e){
        const UP=38, DOWN=40;
        if (e.which !== UP && e.which !== DOWN) return;
        e.preventDefault();
        const $cell=$(this).closest('td');
        const colIndex=$cell.index();
        const $rows=$('#table_products tbody tr').not('.template-row');
        const rowIndex=$rows.index($cell.closest('tr'));
        const $target=(e.which===DOWN) ? $rows.eq(rowIndex+1) : $rows.eq(rowIndex-1);
        if(!$target.length) return;
        const $ctrl=$target.find('td').eq(colIndex).find('input:visible, select:visible').first();
        if($ctrl.length) $ctrl.focus();
      });
    });

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  7 — STOCK VALIDATION & ENFORCEMENT                          ║
  // ║  Qty caps, stock checks, variant stock validation            ║
  // ╚══════════════════════════════════════════════════════════════╝

  function enforceQtyCap($row){
    const row = $row.data('rowObj') || {};
    const zeroStockAllow = String(settingsDict.zero_stock_allow).toLowerCase() === 'true';

    // quantities
    const ppp = +($row.find('.p-pack-input').val() || row.p_per_pack || 1) || 1;
    const q   = +($row.find('.qty-input').val()  || 0);
    const pc  = settingsDict.show_pcs   ? +($row.find('.pcs-input').val()   || 0) : 0;
    const bn  = settingsDict.show_bonus ? +($row.find('.bonus-input').val() || 0) : 0;

    const saleUnits     = q + (pc / (ppp > 0 ? ppp : 1));
    const unitsForStock = saleUnits + (settingsDict.show_bonus ? bn : 0);

    // row must be meaningful
    const hasProduct = !!(row && (row.id || row.code));
    if (!hasProduct || saleUnits === 0) {
      const $qty = $row.find('.qty-input');
      if ($qty.length){ $qty.focus(); try{ $qty[0].select(); }catch(_){ } }
      return false;
    }

    // ESTIMATE or RETURN modes skip caps altogether
    const skipStockCheck = (typeof isEstimateMode === 'function' && isEstimateMode()) ||
                           (typeof isReturnMode   === 'function' && isReturnMode());
    if (skipStockCheck) return true;

    // ---------- NON-VARIANT LOGIC (single/zero variant) ----------
    const productAvail = Number(
      (row.present_stock != null) ? row.present_stock :
      (row.stock_product != null) ? row.stock_product : 0
    );

    // zero_stock_allow === true => no cap
    if (zeroStockAllow) return true;

    // else cap to product-level stock
    if (unitsForStock > productAvail + 1e-9){
      Swal.fire({
        icon: 'warning',
        title: 'Out of stock',
        text: `Available: ${productAvail.toFixed(2)} · Requested: ${unitsForStock.toFixed(2)}`
      }).then(()=>{
        const maxUnits = Math.max(0, productAvail - (settingsDict.show_bonus ? bn : 0));
        const newQty   = (ppp > 1) ? maxUnits : Math.floor(maxUnits);
        $row.find('.qty-input').val(newQty).focus().select().trigger('change');
      });
      return false;
    }
    return true;
    }

  function canCreateNextRow($row){
    try
      {
        return enforceQtyCap($row);
      }
      catch(e){
        console && console.warn && console.warn('canCreateNextRow error:', e);
        return false;
      }
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  8 — VARIANT & SPEC MANAGEMENT                               ║
  // ║  Spec A/B dropdowns, variant selection, priming              ║
  // ╚══════════════════════════════════════════════════════════════╝

  function fillSpecSelect($sel, items){
    // items: [{id, name}, ...]
    $sel.empty().append(new Option('Default', '', true, true)); // value '' = Default

    (items || []).forEach(it => {
      const id = (it && it.id != null) ? String(it.id) : '';
      const name = (it && it.name != null) ? String(it.name) : '';
      if (!id || !name) return;
      $sel.append(new Option(name, id, false, false)); // ✅ text=name, value=id
    });
    }

  // Fixed tenant-level Spec A master dropdown (no search, no "Default")
  function fillSpecAMaster($a){
    if (!$a || !$a.length) return;
    $a.empty();
    const list = Array.isArray(SPEC_A_MASTER) ? SPEC_A_MASTER : [];

    if (list.length === 0){
      // tenant ke paas koi Spec A nahi → Default rakho, disabled
      $a.append(new Option('Default', '', true, true));
      $a.prop('disabled', true);
      return;
    }

    // sirf real Spec A — koi blank Default nahi
    list.forEach(it => $a.append(new Option(it.name, String(it.id), false, false)));

    // sub-tenant assigned → auto-pick, warna pehla option
    const pick = AUTO_SPEC_A_ID ? String(AUTO_SPEC_A_ID) : String(list[0].id);
    $a.val(pick);
    $a.prop('disabled', false);
  }


  function fillSpecSelectWithStock($sel, items){
      // items: [{id, name, on_hand, bonus}, ...]
      $sel.empty().append(new Option('Default', '', true, true));

      (items || []).forEach(it => {
        const id = (it && it.id != null) ? String(it.id) : '';
        const name = (it && it.name != null) ? String(it.name) : '';
        if (!id || !name) return;
        
        const onHand = Math.round(Number(it.on_hand || 0));
        const bonus = Math.round(Number(it.bonus || 0));
        
        // Format: "BatchName (Stk: 50, B: 5)" or "BatchName (Stk: 50)" or "BatchName (0)"
        let displayText = name;
        let stockParts = [];
        if (onHand > 0) stockParts.push(onHand);
        if (bonus > 0) stockParts.push('B:' + bonus);
        
        if (stockParts.length > 0) {
          displayText = name + ' (' + stockParts.join(', ') + ')';
        } else {
          displayText = name + ' (0)';
        }
        
        $sel.append(new Option(displayText, id, false, false));
      });
    }

  function primeVariantsForRow($row, opts){
      opts = opts || {};
      const dfd = $.Deferred();

      const rowObj = $row.data('rowObj') || {};
      $row.data('rowObj', rowObj);

      const productId = toIntSafe(rowObj.id || $row.find('.search-product').val());
      const topN      = Math.max(0, toIntSafe(opts.topN || 5));
      const openIt    = !!opts.open;
      const $target   = opts.targetSelect ? $(opts.targetSelect) : $();

      rowObj._variants = rowObj._variants || [];

      if (!productId) {
        rowObj._variants = [];
        rowObj.is_variant_product = false;
        rowObj._variants_product_id = 0;
        $row.find('.spec-a-select, .spec-b-select').prop('disabled', true);
        primeSpecDropdownsForRow($row, [], { resetVariant: true });
        dfd.resolve();
        return dfd.promise();
      }

      if (rowObj._variants_product_id === productId && rowObj._variants.length){
        applyVariantsToRowUI($row, rowObj._variants, { topN, openIt, $target }, rowObj);  // ← FIXED
        dfd.resolve();
        return dfd.promise();
      }

      if (rowObj._variants_loading){
        dfd.resolve();
        return dfd.promise();
      }
      rowObj._variants_loading = true;

      return $.getJSON(URL_VARIANTS_FOR_PRODUCT, { product_id: productId })
        .done(function(resp){
          rowObj._variants_loading = false;

          if (!resp || !resp.ok){
            rowObj._variants = [];
            rowObj.is_variant_product = false;
            rowObj._variants_product_id = productId;
            $row.find('.spec-a-select, .spec-b-select').prop('disabled', true);
            primeSpecDropdownsForRow($row, [], { resetVariant: true });
            dfd.resolve();
            return;
          }

          const variants = resp.variants || [];
          rowObj._variants = variants;
          rowObj._variants_product_id = productId;

          applyVariantsToRowUI($row, variants, { topN, openIt, $target, default_variant_id: resp.default_variant_id }, rowObj);  // ← FIXED
          dfd.resolve();
        })
        .fail(function(){
          rowObj._variants_loading = false;
          rowObj._variants = [];
          rowObj.is_variant_product = false;
          rowObj._variants_product_id = productId;
          $row.find('.spec-a-select, .spec-b-select').prop('disabled', true);
          primeSpecDropdownsForRow($row, [], { resetVariant: true });
          dfd.resolve();
        });

        // ← this replaces the INNER applyVariantsToRowUI inside primeVariantsForRow
        function applyVariantsToRowUI($row, variants, ctx, rowObj){
            const defaultVarId = toIntSafe(ctx.default_variant_id || 0);
            const isMulti = (variants.length > 1);
            rowObj.is_variant_product = isMulti;

            // ★ DO NOT enable/disable specs here — primeSpecDropdownsForRow handles each independently ★

            let srcAll;
            if (typeof isReturnMode === 'function' && isReturnMode()){
              srcAll = variants;
            } else {
              const inStock = variants.filter(v => Number(v.stock_total ?? v.on_hand ?? 0) > 0);
              srcAll = (inStock.length ? inStock : variants);
            }

            const srcDefault = (ctx.topN > 0 ? srcAll.slice(0, ctx.topN) : srcAll);
            rowObj._variants_src_all = srcAll;

            const existingVar = toIntSafe(rowObj.variant_id || $row.find('.variant-id-input').val() || 0);

            // ★ Prime dropdowns — this will auto-select Spec B if resetVariant=true ★
            primeSpecDropdownsForRow($row, srcDefault, { resetVariant: !existingVar });

            $row.find('.spec-a-select, .spec-b-select')
              .off('select2:open.bpVarSearch')
              .on('select2:open.bpVarSearch', function(){
                if (!isReturnMode()) return;
                const $field = $('.select2-container--open .select2-search__field');
                $field.off('input.bpVarSearch').on('input.bpVarSearch', function(){
                  const term = ($(this).val() || '').trim();
                  if (term.length > 0 && rowObj._variants_src_all && rowObj._variants_src_all.length){
                    primeSpecDropdownsForRow($row, rowObj._variants_src_all, { resetVariant: false });
                  }
                });
              });

            let chosenId = existingVar || 0;
            if (!chosenId){
              if (variants.length === 1) chosenId = toIntSafe(variants[0].id);
              else if (defaultVarId)     chosenId = defaultVarId;
            }

            if (chosenId){
              const v = variants.find(x => toIntSafe(x.id) === chosenId);
              if (v){
                rowObj.variant_id    = toIntSafe(v.id);
                rowObj.stock_variant = Number(v.stock_total ?? v.on_hand ?? 0);
                $row.find('.variant-id-input').val(rowObj.variant_id);
                // if (v.spec_a_name) $row.find('.spec-a-select').val((v.spec_a_name || '').trim()).trigger('change');
                // Sirf tab override karo jab default-variant ka VALID spec_a master list mein ho.
                // Warna fillSpecAMaster() ka pehla-item selection waisa hi rehne do.
                if (!AUTO_SPEC_A_ID && v.spec_a_id != null && String(v.spec_a_id) !== '') {
                  const $sa = $row.find('.spec-a-select');
                  if ($sa.find(`option[value="${String(v.spec_a_id)}"]`).length) {
                    $sa.val(String(v.spec_a_id)).trigger('change');
                  }
                }
                if (v.spec_b_name) $row.find('.spec-b-select').val((v.spec_b_name || '').trim()).trigger('change');
                if (v.sku_code && !$row.find('.vcode-input').val()) $row.find('.vcode-input').val(v.sku_code);
                if (v.rate != null) $row.find('.price-input').val(v.rate).trigger('change');
              }
            }

            // ★★★ NEW: If no variant was chosen via default/single logic,
            //          resolve from auto-selected Spec B (set by primeSpecDropdownsForRow) ★★★
            if (!chosenId){
              pickVariantFromSpecs($row);
            }

            if (ctx.openIt && ctx.$target && ctx.$target.length){
              try {
                if (ctx.$target.data('select2')) ctx.$target.select2('open');
                else ctx.$target.trigger('focus');
              } catch(e){}
            }
          }







      return dfd.promise();
    }

  function primeSpecDropdownsForRow($row, variants, opts){
      opts = opts || {};
      const resetVariant = !!opts.resetVariant;

      const $a = $row.find('.spec-a-select');
      const $b = $row.find('.spec-b-select');

      const aItems = [];
      const bItems = [];
      const seenA = new Set(), seenB = new Set();
      const bStockMap = {};

      (variants || []).forEach(v => {
        const aId   = (v.spec_a_id != null) ? String(v.spec_a_id) : '';
        const aName = (v.spec_a_name || '').trim();
        const bId   = (v.spec_b_id != null) ? String(v.spec_b_id) : '';
        const bName = (v.spec_b_name || '').trim();

        const vOnHand = Number(v.stock_on_hand ?? v.on_hand ?? 0);
        const vBonus  = Number(v.stock_bonus  ?? v.bonus  ?? 0);

        if (aId && aName && !seenA.has(aId)){
          seenA.add(aId);
          aItems.push({ id: aId, name: aName });
        }

        if (bId && bName){
          if (!seenB.has(bId)){
            seenB.add(bId);
            bItems.push({ id: bId, name: bName, on_hand: 0, bonus: 0 });
            bStockMap[bId] = bItems[bItems.length - 1];
          }
          bStockMap[bId].on_hand += vOnHand;
          bStockMap[bId].bonus   += vBonus;
        }
      });

      // ──── SPEC A: Independent ────
      // if ($a.length){
      //   fillSpecSelect($a, aItems);
      //   $a.prop('disabled', aItems.length <= 0);   // ← enable only if options exist
      // }

      // ──── SPEC B: Independent ────
      if ($b.length){
        fillSpecSelectWithStock($b, bItems);
        $b.prop('disabled', bItems.length <= 0);    // ← enable only if options exist

        // ★ AUTO-SELECT first available Spec B (with stock > 0) ★
        if (bItems.length > 0 && resetVariant){
          const isSaleMode = !(typeof isReturnMode === 'function' && isReturnMode());
          let autoItem = null;

          if (isSaleMode){
            // Sale mode → prefer first batch that has stock
            autoItem = bItems.find(b => (b.on_hand || 0) > 0);
          }
          // Fallback (or return mode) → just pick first
          if (!autoItem) autoItem = bItems[0];

          if (autoItem && autoItem.id){
            $b.val(autoItem.id).trigger('change');
          }
        }
      }

      if (resetVariant){
        const rowObj = $row.data('rowObj') || {};
        rowObj.variant_id    = null;
        rowObj.stock_variant = null;
        $row.find('.variant-id-input').val('');
      }
    }
  
  function pickVariantFromSpecs($row){
      const rowObj = $row.data('rowObj') || {};
      const vars   = rowObj._variants || [];
      if (!vars.length) return;

      // ── Read each spec INDEPENDENTLY ──
      const $a  = $row.find('.spec-a-select');
      const $b  = $row.find('.spec-b-select');
      const aId = ($a.length) ? String($a.val() || '') : '';   // '' if column hidden
      const bId = ($b.length) ? String($b.val() || '') : '';

      // Both "Default" / empty → don't auto-pick
      if (!aId && !bId){
        rowObj.variant_id    = null;
        rowObj.stock_variant = null;
        $row.find('.variant-id-input').val('');
        return;
      }

      // Filter: empty spec = wildcard
      const matches = vars.filter(v => {
        const vaId = (v.spec_a_id != null) ? String(v.spec_a_id) : '';
        const vbId = (v.spec_b_id != null) ? String(v.spec_b_id) : '';
        const okA  = aId ? (vaId === aId) : true;
        const okB  = bId ? (vbId === bId) : true;
        return okA && okB;
      });

      if (matches.length === 0){
        rowObj.variant_id    = null;
        rowObj.stock_variant = null;
        $row.find('.variant-id-input').val('');
        return;
      }

      // ★ Pick best: exact (1) → or first with stock → or just first ★
      let found;
      if (matches.length === 1){
        found = matches[0];
      } else {
        found = matches.find(v => Number(v.stock_on_hand ?? v.on_hand ?? 0) > 0)
                || matches[0];
      }

      rowObj.variant_id    = found.id;
      rowObj.stock_variant = Number(found.stock_on_hand ?? found.on_hand ?? 0);
      $row.find('.variant-id-input').val(found.id || '');

      if (found.sku_code) $row.find('.vcode-input').val(found.sku_code);

      if (found.rate != null){
        $row.find('.price-input').val(found.rate).trigger('change');
      }
    }
  // ╔══════════════════════════════════════════════════════════════╗
  // ║  9 — MULTI-BRANCH STOCK DISPLAY                              ║
  // ║  Stock bar with warehouse chips                              ║
  // ╚══════════════════════════════════════════════════════════════╝

  function showMultiBranchStock(productId, productCode) {
    // Only show if setting is enabled
    if (!settingsDict.show_multi_branches_stock) {
      return;
    }
    
    if (!productId) {
      hideMultiBranchStock();
      return;
    }

    $.ajax({
      url: "{% url 'products:get_product_variants_stock' %}",
      type: 'GET',
      data: { product_id: productId },
      headers: { 'X-CSRFToken': csrftoken },
      success: function(res) {
        if (!res.ok || !res.variants || res.variants.length === 0) {
          hideMultiBranchStock();
          return;
        }

        // Filter out default variants and those with no spec_a
        const variants = res.variants.filter(v => !v.is_default && v.spec_a_name);
        
        if (variants.length === 0) {
          hideMultiBranchStock();
          return;
        }

        // Sort: My warehouse first, then by name
        variants.sort((a, b) => {
          const aIsMine = isMyWarehouse(a.spec_a_id);
          const bIsMine = isMyWarehouse(b.spec_a_id);
          if (aIsMine && !bIsMine) return -1;
          if (!aIsMine && bIsMine) return 1;
          return (a.spec_a_name || '').localeCompare(b.spec_a_name || '');
        });

        // Build chips HTML
        let chipsHtml = '';
        variants.forEach(v => {
          const stock = parseFloat(v.stock || 0);
          const stockClass = stock <= 0 ? 'zero' : (stock < 10 ? 'low' : '');
          const specB = v.spec_b_name ? ` / ${v.spec_b_name}` : '';
          
          // Check if this is my warehouse
          const isMine = isMyWarehouse(v.spec_a_id);
          const isPrimary = isPrimaryWarehouse(v.spec_a_name);
          
          let chipClass = 'stock-chip';
          if (isMine) {
            chipClass += ' my-warehouse';
            if (isPrimary) {
              chipClass += ' primary';
            }
          }
          
          chipsHtml += `
            <div class="${chipClass}" 
                 title="${isMine ? '✓ Your warehouse - ' : ''}SKU: ${v.sku_code || ''}"
                 data-spec-a-id="${v.spec_a_id || ''}">
              <span class="chip-name">${v.spec_a_name}${specB}</span>
              <span class="chip-stock ${stockClass}">${formatNumber(stock)}</span>
            </div>
          `;
        });

        $('#multiBranchStockList').html(chipsHtml);
        $('#pibBranchRow').show();
        
        // Show summary if sub-tenant
        updateStockBarSummary(variants);
      },
      error: function() {
        hideMultiBranchStock();
      }
    });
    }

  function isMyWarehouse(specAId) {
    if (!IS_SUB_TENANT || !specAId) return false;
    if (!LOCKED_SPEC_A_IDS || LOCKED_SPEC_A_IDS.length === 0) return false;
    return LOCKED_SPEC_A_IDS.includes(parseInt(specAId));
    }

  function isPrimaryWarehouse(warehouseName) {
    if (!LOCKED_WAREHOUSE_NAME || !warehouseName) return false;
    return warehouseName.toLowerCase().trim() === LOCKED_WAREHOUSE_NAME.toLowerCase().trim();
    }

  function updateStockBarSummary(variants) {
    const $label = $('#multiBranchStockBar .bar-label');
    
    if (IS_SUB_TENANT && LOCKED_WAREHOUSE_NAME) {
      // Find my warehouse stock
      const myVariant = variants.find(v => isMyWarehouse(v.spec_a_id));
      const myStock = myVariant ? parseFloat(myVariant.stock || 0) : 0;
      
      $label.html(`
        <i class="fas fa-warehouse"></i> 
        <span class="text-success font-weight-bold">Your Stock: ${formatNumber(myStock)}</span>
        <span class="text-muted mx-1">|</span>
        All:
      `);
    } else {
      $label.html('<i class="fas fa-warehouse"></i> Stock:');
    }
    }

  function hideMultiBranchStock() {
    $('#pibBranchRow').hide();
    $('#multiBranchStockList').empty();
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  10 — PAYMENT / BANK / CHEQUE                                ║
  // ║  Multi-bank payments, cheque rows, totals                    ║
  // ╚══════════════════════════════════════════════════════════════╝

  function bankOptionsHtml(selectedId) {
    return BANK_ACCOUNTS.map(b =>
      `<option value="${b.id}" ${b.id == selectedId ? 'selected' : ''}>${b.name}</option>`
    ).join('');
    }

  function addBankPaymentRow(bankId, amount) {
    bankId = bankId || (BANK_ACCOUNTS.length ? BANK_ACCOUNTS[0].id : 0);
    amount = amount || '';

    const idx = bankRowCounter++;
    const html = `
      <div class="bank-row" data-idx="${idx}">
        <div class="bank-select-wrap">
          <select class="form-control form-control-sm bp-bank-select">
            ${bankOptionsHtml(bankId)}
          </select>
        </div>
        <div class="bank-amount-wrap">
          <input type="number" step="0.01"
                 class="form-control form-control-sm bp-amount-input"
                 placeholder="Amount" value="${amount}">
        </div>
        <button type="button" class="bank-del-btn bp-del-btn" title="Remove">&times;</button>
      </div>
    `;
    $('#bankPaymentsContainer').append(html);
    // Focus the new amount input
    $('#bankPaymentsContainer .bank-row').last().find('.bp-amount-input').focus();
    }

  function addChequeRow(data) {
    data = data || {};
    const idx = chequeRowCounter++;
    const today = $('#sale_date').val() || '';

    const html = `
      <div class="cheque-row" data-idx="${idx}">
        <div class="ch-no">
          <input type="text" class="form-control form-control-sm ch-no-input"
                 placeholder="Cheque #" value="${data.cheque_no || ''}">
        </div>
        <div class="ch-date">
          <input type="date" class="form-control form-control-sm ch-date-input"
                 value="${data.cheque_date || today}">
        </div>
        <div class="ch-amt">
          <input type="number" step="0.01" class="form-control form-control-sm ch-amount-input"
                 placeholder="Amount" value="${data.amount || ''}">
        </div>
        <div class="ch-party">
          <input type="text" class="form-control form-control-sm ch-party-input"
                 placeholder="Party Name" value="${data.party || ''}">
        </div>
        <div class="ch-bank">
          <select class="form-control form-control-sm ch-bank-select">
            ${bankOptionsHtml(data.bank_id || (BANK_ACCOUNTS.length ? BANK_ACCOUNTS[0].id : 0))}
          </select>
        </div>
        <button type="button" class="cheque-del-btn ch-del" title="Remove">&times;</button>
      </div>
    `;
    $('#chequesContainer').append(html);
    // Focus cheque number
    $('#chequesContainer .cheque-row').last().find('.ch-no-input').focus();
    }

  function collectBankPayments() {
    const entries = [];
    $('#bankPaymentsContainer .bank-row').each(function() {
      const bankId = parseInt($(this).find('.bp-bank-select').val()) || 0;
      const amount = parseFloat($(this).find('.bp-amount-input').val()) || 0;
      if (bankId > 0 || amount > 0) {
        entries.push({ bank_id: bankId, amount: amount });
      }
    });

    // ── CASH AUTO-FILL ──
    // If cash sale / cash return AND no amount entered anywhere,
    // auto-assign grand_total to the primary (first) bank
    const st = ($('#sale_type').val() || '').toLowerCase();
    const isCashType = (st === 'cash' || st === 'cash_return');

    if (isCashType) {
      const totalEntered = entries.reduce((s, e) => s + e.amount, 0);
      const chequeTotal  = collectCheques().reduce((s, c) => s + (c.amount || 0), 0);

      if (totalEntered === 0 && chequeTotal === 0 && sale.grand > 0) {
        // Get primary bank id from the first dropdown
        const primaryBankId = parseInt(
          $('#bankPaymentsContainer .bank-row.primary-row .bp-bank-select').val()
        ) || (BANK_ACCOUNTS.length ? BANK_ACCOUNTS[0].id : 0);

        // Clear entries and push full grand_total to primary bank
        entries.length = 0;
        entries.push({ bank_id: primaryBankId, amount: Math.abs(sale.grand) });
      }
    }

    return entries;
    }

  function collectCheques() {
    const entries = [];
    $('#chequesContainer .cheque-row').each(function() {
      const chequeNo = ($(this).find('.ch-no-input').val() || '').trim();
      const chequeDate = $(this).find('.ch-date-input').val() || '';
      const amount = parseFloat($(this).find('.ch-amount-input').val()) || 0;
      const party = ($(this).find('.ch-party-input').val() || '').trim();
      const bankId = parseInt($(this).find('.ch-bank-select').val()) || 0;

      if (chequeNo || amount > 0) {
        entries.push({
          cheque_no: chequeNo,
          cheque_date: chequeDate,
          amount: amount,
          party: party,
          bank_id: bankId
        });
      }
    });
    return entries;
    }

  function getTotalReceived() {
    let bankTotal = 0;
    $('#bankPaymentsContainer .bank-row').each(function() {
      bankTotal += parseFloat($(this).find('.bp-amount-input').val()) || 0;
    });

    let chequeTotal = 0;
    $('#chequesContainer .cheque-row').each(function() {
      chequeTotal += parseFloat($(this).find('.ch-amount-input').val()) || 0;
    });

    return { bankTotal, chequeTotal, total: bankTotal + chequeTotal };
    }

  function updatePaymentSummary() {
    const { bankTotal, chequeTotal, total } = getTotalReceived();

    if (bankTotal > 0) {
      $('#pay_summary_banks').show().find('#pay_sum_bank_val').text(fmt2(bankTotal));
    } else {
      $('#pay_summary_banks').hide();
    }

    if (chequeTotal > 0) {
      $('#pay_summary_cheques').show().find('#pay_sum_cheque_val').text(fmt2(chequeTotal));
    } else {
      $('#pay_summary_cheques').hide();
    }

    if (total > 0) {
      $('#pay_summary_total').show().find('#pay_sum_total_val').text(fmt2(total));
    } else {
      $('#pay_summary_total').hide();
    }
    }

  $(function() {
    // Add Bank row
    $('#btnAddBankPayment').on('click', function() {
      addBankPaymentRow();
    });

    // Toggle cheque section
    $('#btnToggleCheques').on('click', function() {
      $('#chequeSection').slideDown(200);
      if ($('#chequesContainer .cheque-row').length === 0) {
        addChequeRow();
      }
    });
    $('#btnCloseCheques').on('click', function() {
      $('#chequeSection').slideUp(200);
    });

    // Add cheque row
    $('#btnAddCheque').on('click', function() {
      addChequeRow();
    });

    // Delete bank payment row (not primary)
    $(document).on('click', '.bp-del-btn', function() {
      const $row = $(this).closest('.bank-row');
      if ($row.hasClass('primary-row')) return; // Can't delete primary
      $row.remove();
      updatePaymentSummary();
      updateRemaining();
    });

    // Delete cheque row
    $(document).on('click', '.ch-del', function() {
      $(this).closest('.cheque-row').remove();
      updatePaymentSummary();
      updateRemaining();
      // If no cheques left, hide section
      if ($('#chequesContainer .cheque-row').length === 0) {
        $('#chequeSection').slideUp(200);
      }
    });

    // Recalc on any amount change (bank or cheque)
    $(document).on('keyup change', '.bp-amount-input, .ch-amount-input', function() {
      updatePaymentSummary();
      updateRemaining();
    });

    // F1 shortcut → focus primary bank amount
    // (replaces old #total_received focus)
    $(document).off('keydown.f1Pay').on('keydown.f1Pay', function(e) {
      if (e.key === 'F1' || e.which === 112) {
        e.preventDefault();
        setTimeout(function() {
          var el = $('#bankPaymentsContainer .bank-row.primary-row .bp-amount-input')[0];
          if (el) { el.focus(); el.select(); }
        }, 60);
      }
    });

  $(document).on('keydown', '.bp-amount-input', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      const $row = $(this).closest('.bank-row');
      const $allRows = $('#bankPaymentsContainer .bank-row');
      if ($allRows.index($row) === $allRows.length - 1) {
        // Last row — add new or go to product
        const val = parseFloat($(this).val()) || 0;
        if (val > 0) {
          // Has value, go back to product entry
          ensureNextRowFocusOrCreate();
        }
      } else {
        // Focus next row's amount
        $allRows.eq($allRows.index($row) + 1).find('.bp-amount-input').focus();
      }
    }
    });

  $(document).on('keydown', '.cheque-row input, .cheque-row select', function(e) {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    const $row = $(this).closest('.cheque-row');
    const $inputs = $row.find('input:visible, select:visible');
    const idx = $inputs.index(this);
    if (idx < $inputs.length - 1) {
      $inputs.eq(idx + 1).focus();
      } else {
      // Last field in cheque row — go to products or add another cheque
      ensureNextRowFocusOrCreate();
      }
    });
    });

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  11 — TABLE ROW CRUD & RECALCULATION                         ║
  // ║  addRow, fillRow, recalcAll                                  ║
  // ╚══════════════════════════════════════════════════════════════╝

  function addRow(data) {
      const $tpl   = $('.template-row').clone().removeClass('template-row d-none').show();
      const rowObj = {
        code: '', pcs:0, bonus:0, name:'', qty:0, price:0,
        gst:0, f_tax:0, disc:0, to:0, total:0, p_per_pack: 1, item_wise_price: 0, purchase_price:0,bags:0
      };

      $tpl.data('rowObj', rowObj);
      if (data) Object.assign(rowObj, data);
      // ★ Fixed tenant Spec A master dropdown ★
      if (settingsDict.show_warehouse) {
        fillSpecAMaster($tpl.find('.spec-a-select'));
      }
      $tpl.find('.code-input').val(rowObj.code)
        .on('keypress', function(e){
          if (e.which !== 13) return;
          e.preventDefault();

          const val = ($(this).val() || '').trim();

          // Feature 2: +<n> / -<n> in code input → last filled row ki qty adjust
          var _deltaMatch = val.match(/^([+\-])(\d+(?:\.\d+)?)$/);
          if (_deltaMatch) {
            var delta = parseFloat(_deltaMatch[1] + _deltaMatch[2]);
            var $target = $('#table_products tbody tr').not('.template-row').filter(function() {
              var ro = $(this).data('rowObj');
              return ro && (ro.id || ro.code);
            }).last();
            if ($target.length) {
              var $qi  = $target.find('.qty-input');
              var tPpp = parseInt(($target.data('rowObj') || {}).p_per_pack || 1, 10) || 1;
              if (settingsDict.pieces_wise_sale) {
                var _tp   = parsePcsAwareQty($qi.val(), tPpp);
                var _newU = Math.max(1 / tPpp, _tp.totalUnits + delta);
                var _newQ = Math.floor(_newU);
                var _newP = Math.round((_newU - _newQ) * tPpp);
                $qi.val(_newP > 0 ? (_newQ + '.' + _newP) : String(_newQ)).trigger('change');
              } else {
                $qi.val(Math.max(1, (parseFloat($qi.val()) || 0) + delta)).trigger('change');
              }
              // Focus STAYS on code input — qty par shift nahi hoga
            }
            $(this).val('');    // code clear karo
            $(this).focus();    // same code input par raho
            return;
          }

          if (!val) {
            $tpl.find('.search-product').select2('open');
            setTimeout(()=> {
              document.querySelector('.select2-container--open .select2-search__field')?.focus();
            }, 0);
            return;
          }

          $.ajax({
            url: "{% url 'products:search_product' %}",
            data: { product_code: val },
            headers: { 'X-CSRFToken': csrftoken },
            success(res) {
              if (res.error) return Swal.fire(res.error, '', 'error');

              const productCode = (res.product_code || val).toString().trim();

              // Check setting - handle both string and boolean
              const allowMultipleRates = settingsDict.allow_multiple_rates === true;

              // ====== CHECK FOR DUPLICATE ROW ======
              if (!allowMultipleRates) {
                let $existingRow = null;
                
                // Get all rows except template and current row
                const $allRows = $('#table_products tbody tr').not('.template-row').not($tpl);
                
                $allRows.each(function(index) {
                  const $row = $(this);
                  const existingRowObj = $row.data('rowObj');
                  const existingCode = (existingRowObj?.code || '').toString().trim();
                  
                  if (existingRowObj && existingCode === productCode) {
                    $existingRow = $row;
                    return false; // break loop
                  }
                });

                // If duplicate found, increment qty and remove current row
                if ($existingRow && $existingRow.length) {
                  const existingRowObj = $existingRow.data('rowObj');
                  const currentQty = +$existingRow.find('.qty-input').val() || 0;
                  const newQty = currentQty + 1;

                  // Update qty in existing row
                  $existingRow.find('.qty-input').val(newQty).trigger('change');
                  
                  // Remove current empty row
                  sale.products = sale.products.filter(o => o !== rowObj);
                  $tpl.remove();
                  
                  // Recalculate totals
                  recalcAll();
                  setHudStockPrice(existingRowObj.present_stock, existingRowObj.purchase_price);
                  
                  const $new = addRow();
                  const $newCode = $new.find('.code-input');
                  if ($newCode.length) {
                    $newCode.focus();
                    try { $newCode[0].select(); } catch(_){}
                  } else {
                    focusFirstFieldForRow($new);
                  }
                  return;
                }
              }

              fillRow($tpl, res);

              // Stamp code/id on rowObj
              rowObj.id   = res.prod_id || res.id || res.product_id;
              rowObj.code = res.product_code;
              rowObj.purchase_price = res.purchase_price;

              // NEW: Show multi-branch stock
              showMultiBranchStock(res.id || res.prod_id, res.product_code);

              // ✅ ALWAYS prime variants after product fill
              const pvPromise = primeVariantsForRow($tpl);

              // ── Same Spec-A / Spec-B aware focus chain as Name & Code-select2 search ──
              function runSpecAwareFocus($row, fallback) {
                if (settingsDict.show_warehouse) {
                  const $specA = $row.find('.spec-a-select');
                  if ($specA.length) {
                    if ($specA.data('select2')) { try { $specA.select2('destroy'); } catch(_){} }

                    if (AUTO_SPEC_A_ID) {
                      if (typeof fallback === 'function') { fallback(); return; }
                      const $fqA = settingsDict.pieces_wise_sale ? $row.find('.pcs-input') : $row.find('.qty-input');
                      if ($fqA.length) { $fqA.focus(); try { $fqA[0].select(); } catch(_){} }
                      return;
                    }

                    if (!$specA.val() && $specA.find('option').length) {
                      $specA.prop('selectedIndex', 0).trigger('change');
                    }
                    setTimeout(() => { $specA.focus(); }, 40);
                    return; // Spec-A manually chunni hai — yahan thehrein, agla row/qty abhi nahi
                  }
                }

                if (!settingsDict.show_warehouse && settingsDict.show_batch) {
                  const $specB = $row.find('.spec-b-select');
                  if ($specB.length) {
                    const ro = $row.data('rowObj') || {};
                    const variants = ro._variants || [];
                    const hasStockVariant = variants.some(v => Number(v.stock_on_hand ?? v.on_hand ?? 0) > 0);

                    const isSaleMode = !isReturnMode();
                    if (isSaleMode && !hasStockVariant) {
                      if (typeof fallback === 'function') { fallback(); return; }
                      const $fqB = settingsDict.pieces_wise_sale ? $row.find('.pcs-input') : $row.find('.qty-input');
                      if ($fqB.length) { $fqB.focus(); try { $fqB[0].select(); } catch(_){} }
                      return;
                    }

                    if (!$specB.data('select2')) {
                      $specB.select2(isSaleMode ? {
                        theme: 'bootstrap4', width: '100%', placeholder: 'Select Batch',
                        minimumResultsForSearch: Infinity, dropdownCssClass: 'spec-dropdown-wide'
                      } : {
                        theme: 'bootstrap4', width: '100%', placeholder: 'Search Batch',
                        dropdownCssClass: 'spec-dropdown-wide'
                      });
                    }

                    try {
                      $specB.select2('open');
                      if (!isSaleMode) {
                        setTimeout(() => {
                          const el = document.querySelector('.select2-container--open .select2-search__field');
                          if (el) typeAThenBackspace(el, 50);
                        }, 0);
                      }
                    } catch(err) {
                      console.warn('Spec B select2 open failed:', err);
                      $specB.focus();
                    }
                    return; // Spec-B manually chunni hai
                  }
                }

                // Koi spec zaroori nahi — purana behavior
                if (typeof fallback === 'function') { fallback(); return; }
                var $fDefault = settingsDict.pieces_wise_sale ? $row.find('.pcs-input') : $row.find('.qty-input');
                if ($fDefault.length) { $fDefault.focus(); try { $fDefault[0].select(); } catch(_){} }
              }

              if (settingsDict.barcode === "3") {
                rowObj.qty = 1;
                $tpl.find('.qty-input').val(1).trigger('change');

                pvPromise.always(function(){
                  if (!canCreateNextRow($tpl)) return;

                  setTimeout(() => {
                    runSpecAwareFocus($tpl, function () {
                      const $new = addRow();
                      const $newCode = $new.find('.code-input');
                      if ($newCode.length) {
                        $newCode.focus();
                        try { $newCode[0].select(); } catch(_){}
                      } else {
                        focusFirstFieldForRow($new);
                      }
                    });
                  }, 0);
                });

              } else {
                recalcAll();
                setHudStockPrice(rowObj.present_stock, rowObj.purchase_price);

                setTimeout(() => {
                  runSpecAwareFocus($tpl);
                }, 0);
              }
            }
          });
        });

      if (settingsDict.barcode === "2" && settingsDict.show_code) {
        const $codeCell = $tpl.find('td').eq(2); // Code column (2nd col)
        const $codeSel  = $('<select class="form-control form-control-sm code-select select2"></select>');
        $codeCell.append($codeSel);
        $tpl.find('.code-input').hide();

        // closure vars (NO "this" inside callbacks)
        let __lastCodeTerm = '';
        let __xhr = null;

        $codeSel.select2({
          theme: 'bootstrap4',
          width: '100%',
          dropdownAutoWidth: true,
          dropdownCssClass: 'code-dd-wide',
          placeholder: 'Search Code…',
          minimumInputLength: 0,          // allow query even when empty
          selectOnClose: false,           // don't auto-pick first
          ajax: {
            url: '{% url "products:get_products_codes" %}',
            type: 'POST',
            dataType: 'json',
            delay: 200,
            headers: { 'X-CSRFToken': csrftoken },
            data: p => ({ term: (p.term || '').trim() }),

            // abort previous + short-circuit when empty
            transport: function (params, success, failure) {
              if (__xhr && __xhr.readyState !== 4) { try { __xhr.abort(); } catch(_){} }
              const term = (params.data.term || '').trim();
              if (!term) {
                success({ results: [] });
                // return a fake jqXHR-like promise so select2 is happy
                const dfd = $.Deferred(); dfd.resolve({ results: [] });
                return dfd.promise({ abort: function(){} });
              }
              __lastCodeTerm = term;
              __xhr = $.ajax(params);
              __xhr.then(success, failure);
              return __xhr; // IMPORTANT
            },

            processResults: resp => {
              const q = (__lastCodeTerm || '').toLowerCase();
              if (!q) return { results: [] };

              // normalize resp to array
              const arr = Array.isArray(resp)
                ? resp
                : (resp && Array.isArray(resp.results)) ? resp.results
                : (resp && Array.isArray(resp.data))    ? resp.data
                : [];

              const results = arr
                .filter(x => (x && x.product_code ? String(x.product_code).toLowerCase() : '').includes(q))
                .map(x => ({ ...x, text: x.product_code || '' })); // search by code only

              return { results };
            }
          },

          // UI: single-line grid — Code | Name | Buy | Sale | Stk
          templateResult: item => {
            if (!item.id) return item.text;
            const code   = spEsc(item.product_code || item.text || '');
            const name   = spEsc(spTitleCase(item.name || ''));
            const sale   = item.l_sale_price != null ? spMoney(item.l_sale_price)
                         : item.price        != null ? spMoney(item.price) : '–';
            const stk    = item.present_stock != null
                         ? Number(item.present_stock).toLocaleString() : '–';
            {% if 'show_purchase_price_in_sale' in allowed_features %}
            const buy    = item.purchase_price != null ? spMoney(item.purchase_price) : '–';
            const buyHtml  = `<span class="cds-buy">Buy: ${buy}</span>`;
            const rowClass = 'cds-row cds-row-5';
            {% else %}
            const buyHtml  = '';
            const rowClass = 'cds-row cds-row-4';
            {% endif %}
            return `
              <div class="${rowClass}">
                <span class="cds-code">${code}</span>
                <span class="cds-name">${name || '–'}</span>
                ${buyHtml}
                <span class="cds-sale">Sale: ${sale}</span>
                <span class="cds-stk">Stk: ${stk}</span>
              </div>`;
          },
          escapeMarkup: m => m,
          templateSelection: item => {
            const code = item.product_code || item.text || '';
            const name = item.name || '';
            return name ? `${code}` : code;
          }
        })
        .on('select2:open', () => {
          // Pre-fill search with current selected value so user can edit from there
          setTimeout(() => {
            const $sf = $('.select2-container--open .select2-search__field');
            if ($sf.length) {
              const cur = $codeSel.find('option:selected').text() || '';
              const prefill = (cur && cur !== 'Search Code…') ? cur.split(' — ')[0].trim() : '';
              if (prefill) {
                $sf.val(prefill).trigger('input');
                $sf[0].setSelectionRange(prefill.length, prefill.length);
              }
              $sf.focus();
            }
          }, 0);

          // if empty, clear UI list immediately (no stale items) 
          const inst      = $codeSel.data('select2');
          const $search   = (inst && inst.dropdown && inst.dropdown.$search)
            ? inst.dropdown.$search
            : $('.select2-container--open .select2-search__field').last();
          const $dropdown = (inst && inst.dropdown && inst.dropdown.$dropdown)
            ? inst.dropdown.$dropdown
            : $('.select2-container--open');

          if ($search && $search.length) {
            const showHint = () => {
              const $list = $dropdown.find('.select2-results__options');
              $list.empty().append(
                '<li class="select2-results__option select2-results__message">Type 1+ characters</li>'
              );
              $dropdown.find('.select2-results__option--highlighted')
                       .removeClass('select2-results__option--highlighted');
            };

            if (!($search.val() || '').trim()) showHint();
            $search.off('input.clearOnEmpty')
                   .on('input.clearOnEmpty', () => {
                     if (!($search.val() || '').trim()) showHint();
                   });

            // (optional) empty Enter => jump to Name select2
            $search.off('keydown.jumpToName')
                   .on('keydown.jumpToName', (ev) => {
                     const k = ev.key || ev.which;
                     if (k === 'Enter' || k === 13) {
                       const v = ($search.val() || '').toString().trim();
                       const hasHighlight = !!$dropdown.find('.select2-results__option--highlighted').length;
                       const hasSelection = !!$codeSel.val();
                       if (!v && !hasHighlight && !hasSelection) {
                         ev.preventDefault(); ev.stopPropagation();
                         try { $codeSel.select2('close'); } catch(_) {}
                         const $nameSel = $tpl.find('.search-product');
                         if ($nameSel.length) {
                           if (typeof focusSelect2Search === 'function') focusSelect2Search($nameSel);
                           else { $nameSel.select2('open'); setTimeout(()=> {
                             document.querySelector('.select2-container--open .select2-search__field')?.focus();
                           }, 0); }
                         }
                       }
                     }
                   });
          }
        })
        .on('select2:select', e => {
          const it = e.params.data;
          rowObj.id   = it.id;
          rowObj.code = it.product_code || it.code || '';
          rowObj.purchase_price = it.purchase_price || 0;
          $tpl.find('.code-input').val(rowObj.code); // mirror

          fillRow($tpl, it);
          recalcAll();
          setHudStockPrice(rowObj.present_stock, rowObj.purchase_price);
          showMultiBranchStock(it.id || it.prod_id, it.product_code);

          maybeOpenSerialPicker($tpl, it);

          // ── Same Spec-A / Spec-B aware focus chain as Name search (parity fix) ──
          setTimeout(() => {
            // ✅ Check warehouse first
            if (settingsDict.show_warehouse) {
              const $specA = $tpl.find('.spec-a-select');
              if ($specA.length) {
                if ($specA.data('select2')) { try { $specA.select2('destroy'); } catch(_){} }

                if (AUTO_SPEC_A_ID) {
                  const $fqA = settingsDict.pieces_wise_sale ? $tpl.find('.pcs-input') : $tpl.find('.qty-input');
                  if ($fqA.length) { $fqA.focus(); try { $fqA[0].select(); } catch(_){} }
                  return;
                }

                if (!$specA.val() && $specA.find('option').length) {
                  $specA.prop('selectedIndex', 0).trigger('change');
                }
                setTimeout(() => { $specA.focus(); }, 40);
                return;
              }
            }

            // ✅ Check batch if warehouse is false
            if (!settingsDict.show_warehouse && settingsDict.show_batch) {
              const $specB = $tpl.find('.spec-b-select');
              if ($specB.length) {
                const rowObj = $tpl.data('rowObj') || {};
                const variants = rowObj._variants || [];
                const hasStockVariant = variants.some(v => Number(v.stock_on_hand ?? v.on_hand ?? 0) > 0);

                const isSaleMode = !isReturnMode();
                if (isSaleMode && !hasStockVariant) {
                  const $fqB = settingsDict.pieces_wise_sale ? $tpl.find('.pcs-input') : $tpl.find('.qty-input');
                  if ($fqB.length) { $fqB.focus(); try { $fqB[0].select(); } catch(_){} }
                  return;
                }

                if (!$specB.data('select2')) {
                  if (isSaleMode) {
                    $specB.select2({
                      theme: 'bootstrap4', width: '100%', placeholder: 'Select Batch',
                      minimumResultsForSearch: Infinity, dropdownCssClass: 'spec-dropdown-wide'
                    });
                  } else {
                    $specB.select2({
                      theme: 'bootstrap4', width: '100%', placeholder: 'Search Batch',
                      dropdownCssClass: 'spec-dropdown-wide'
                    });
                  }
                }

                try {
                  $specB.select2('open');
                  if (!isSaleMode) {
                    setTimeout(() => {
                      const el = document.querySelector('.select2-container--open .select2-search__field');
                      if (el) typeAThenBackspace(el, 50);
                    }, 0);
                  }
                } catch(err) {
                  console.warn('Spec B select2 open failed:', err);
                  $specB.focus();
                }
                return;
              }
            }

            // ✅ Default: pieces_wise_sale → pcs focus, warna qty
            var $fDefault = settingsDict.pieces_wise_sale ? $tpl.find('.pcs-input') : $tpl.find('.qty-input');
            if ($fDefault.length) {
              $fDefault.focus();
              try { $fDefault[0].select(); } catch(_){}
            }
          }, 0);

          primeVariantsForRow($tpl);
        })
        .on('select2:close', () => {
          // cleanup input handlers
          const inst    = $codeSel.data('select2');
          const $search = (inst && inst.dropdown && inst.dropdown.$search) ? inst.dropdown.$search : null;
          $search && $search.off('input.clearOnEmpty keydown.jumpToName');

          if (!rowObj.code) return;
          $.ajax({
            url: "{% url 'products:search_product' %}",
            headers: { 'X-CSRFToken': csrftoken },
            data: { product_code: rowObj.code },
            success(res) {
              if (res.error) return;
              fillRow($tpl, res);
              recalcAll();
              setHudStockPrice(rowObj.present_stock, rowObj.purchase_price);

            }
          });
        });
      }
      const $sel = $tpl.find('.search-product');

      /* RESULT row: only NAME + Price/Stock (no code) */
      function spTemplateResult(item){
        if (!item.id) return item.text;
        const name  = spEsc(item.name || item.text || '');
        const price = (item.l_sale_price != null ? item.l_sale_price :
                      (item.price != null ? item.price : ''));
        const stock = (item.present_stock != null ? item.present_stock : '');

        return `
          <div class="sp-opt">
            <div class="sp-name">${spTitleCase(name)}</div>
            <div class="sp-meta">
              <span class="sp-price">Price: ${spMoney(price)}</span>
              <span class="sp-stock">Stock: ${spMoney(stock)}</span>
            </div>
          </div>
        `;
      }

      function spTemplateSelection(item){
        // selection me normal name hi dikhao (aapka current UX)
        return item.text || item.name || '';
      }

      function setNativeValue(el, value){
        // React/jQuery style safe setter
        const proto = Object.getPrototypeOf(el);
        const desc = Object.getOwnPropertyDescriptor(proto, 'value');
        if (desc && desc.set) desc.set.call(el, value);
        else el.value = value;
      }

      function triggerInput(el){
        el.dispatchEvent(new Event('input', { bubbles: true }));
        el.dispatchEvent(new Event('keyup', { bubbles: true })); // extra nudge (optional)
      }

      function typeAThenBackspace(el, delayMs = 0){
        setTimeout(() => {
          if (!el) return;
          el.focus();

          // 1) type "a"
          setNativeValue(el, ' ');
          triggerInput(el);

          // 2) wait a bit then backspace (clear)
          setTimeout(() => {
            // either simulate "backspace" by clearing value
            setNativeValue(el, '');
            triggerInput(el);

            // optional: also dispatch a Backspace keydown (if your code listens to it)
            el.dispatchEvent(new KeyboardEvent('keydown', {
              key: 'Backspace', code: 'Backspace', bubbles: true, cancelable: true
            }));
          }, 80);

        }, delayMs);
      }

      $sel.select2({
        theme: 'bootstrap4',
        width: '100%',
        dropdownAutoWidth: true,              // dropdown ko content ke mutabiq allow karo
        dropdownCssClass: 'sp-wide-dd',       // hamari custom wide class (CSS upar diya)
        placeholder: 'Search Product…',
        minimumInputLength: 1,
        ajax: {
          url: '{% url "products:get_products" %}',
          type: 'POST',
          delay: 250,
          headers: { 'X-CSRFToken': csrftoken },
          data: p => ({ term: p.term }),
          processResults: d => ({ results: d })
        },
        templateResult: spTemplateResult,
        templateSelection: spTemplateSelection,
        language: {
          noResults: function() {
            return (
              '<div class="text-center p-2">' +
                '<div class="small text-muted mb-1">No item found</div>' +
                '<button type="button" class="btn btn-sm btn-primary sp-nores-create" tabindex="0">Create New</button>' +
              '</div>'
            );
          }
        },
        escapeMarkup: function(m) { return m; }
      })
 
      .on('select2:open', () => {
        // Pre-fill search with current selected value so user can edit from there
        setTimeout(() => {
          const $sf = $('.select2-container--open .select2-search__field');
          if ($sf.length) {
            const cur = $sel.find('option:selected').text() || '';
            const prefill = (cur && cur !== 'Search Product…') ? cur.trim() : '';
            if (prefill) {
              $sf.val(prefill).trigger('input');
              $sf[0].setSelectionRange(prefill.length, prefill.length);
            }
            $sf.focus();
          }
        }, 0);

        // +++ NEW: mark this row as active for quick-add flow
        window.__activeProductRow = $tpl;

        // +++ NEW: wire ArrowDown → focus Create button
        setTimeout(()=>{
          const $dd  = $('.select2-container--open');
          const $inp = $dd.find('.select2-search__field');

          // after: const $inp = $dd.find('.select2-search__field');
          window.__lastProductSearchTerm = '';                              // NEW
          window.__lastProductSearchTerm = ($inp.val() || '');              // NEW (seed with current)
          $inp.off('input.qaTerm').on('input.qaTerm', function(){           // NEW
            window.__lastProductSearchTerm = this.value || '';
          });

          // Clean old handlers (safety)
          // $inp.off('keydown.spNoRes');
          $dd.off('click.spCreate keydown.spCreate');

          // When user presses ArrowDown on empty results, jump to the Create button
          $inp.on('keydown.spNoRes', function(ev){
            if ((ev.key || ev.which) === 'ArrowDown' || ev.which === 40) {
              const $btn = $dd.find('.sp-nores-create');
              if ($btn.length) { ev.preventDefault(); $btn.focus(); }
            }
          });

          // Click/Enter on the injected Create button → open modal
          $dd.on('click.spCreate', '.sp-nores-create', function(ev){
            ev.preventDefault();


            // 1) Get the current term BEFORE closing select2
            const $open   = $('.select2-container--open');
            const $search = $open.find('.select2-search__field');
            const termRaw = ($search.val() || window.__lastProductSearchTerm || '').toString();
            const term    = termRaw.trim();

            // CLOSE the currently-open search-product select2 to avoid overlap
            const $row = (window.__activeProductRow && window.__activeProductRow.length)
                          ? window.__activeProductRow
                          : $tpl;
            try { $row.find('.search-product').select2('close'); } catch(_){}

            // While QA modal open, push select2 behind
            $('body').addClass('qa-modal-open');

            // Prefill Item Name with current search term
            // const term = ($inp.val() || '').trim();
            $('#qa_name').val(term);
            $('#qa_pieces').val(1);
            $('#qa_purchase').val(0);
            $('#qa_sale').val(0);

            $('#productQuickAddModal').modal('show');
            setTimeout(()=> $('#qa_name').trigger('focus').select(), 150);
          });

          // Enter key while button focused
          $dd.on('keydown.spCreate', '.sp-nores-create', function(ev){
            if ((ev.key || ev.which) === 'Enter' || ev.which === 13) {
              ev.preventDefault();
              $(this).trigger('click');
            }
          });

          // Cleanup on close
          $sel.one('select2:close', () => {
            $inp.off('keydown.spNoRes input.qaTerm');
            $dd.off('click.spCreate keydown.spCreate');
          });

        }, 0);
      })

      .on('select2:select', e => {
          const data = e.params.data || {};
          // Strongly stamp id/code so close-time logic kabhi stale na ho
          rowObj.id   = data.id || rowObj.id;
          rowObj.code = data.product_code || data.code || rowObj.code || '';
          rowObj.p_per_pack = data.pieces_per_pack || 1;
          rowObj.purchase_price = data.purchase_price || 1;

          // (Optional but robust) ensure select2 reflects the *selected* option only
          const $nameSel = $tpl.find('.search-product');
          $nameSel.empty().append(new Option(data.text || data.name || '', data.id, true, true)).trigger('change.select2');

          fillRow($tpl, data);
          recalcAll();
          showMultiBranchStock(data.id || data.prod_id, data.product_code);
          rowObj.stock_product = Number(
            (data.present_stock != null) ? data.present_stock :
            (data.stock != null)         ? data.stock :
            (data.on_hand != null)       ? data.on_hand : 0
          );

          // defaults: non-variant
          rowObj.is_variant_product = false;
          rowObj.variant_required   = false;

          try { $sel.select2('close'); } catch (_){}

          maybeOpenSerialPicker($tpl, data);

          // ── Last Rate fetch (all sale types) ──
          const saleType = ($('#sale_type').val() || '').toLowerCase();
          const isCreditSale = (saleType === 'credit' || saleType === 'credit_return');
 
          let _custNameForRate = '';
          if (isCreditSale) {
              try {
                  const _d = $('#searchbox_customers').select2('data');
                  if (_d && _d.length) _custNameForRate = (_d[0].text || _d[0].name || '').trim();
              } catch(e) {
                  _custNameForRate = ($('#searchbox_customers').find('option:selected').text() || '').trim();
              }
          }
 
          const _prodIdForRate = data.prod_id || data.id;
          if (_prodIdForRate) {
              $.ajax({
                  url: "{% url 'products:get_customer_product_history' %}",
                  type: 'GET',
                  data: {
                      product_id: _prodIdForRate,
                      customer_name: _custNameForRate   // credit ho to name, warna empty
                  },
                  headers: { 'X-CSRFToken': csrftoken },
                  success: function(res) {
                      if (res.history && res.history.length > 0) {
                          // FIX: invoice_no DESC sort → most-recent sabse pehle
                          const _sorted = [...res.history].sort(function(a, b) {
                              return (parseInt(b.invoice_no) || 0) - (parseInt(a.invoice_no) || 0);
                          });
                          const _newest = _sorted[0];
                          setHudStockPrice(_newest.item_price, rowObj.purchase_price, true);
                          rowObj._lastRateData = _newest;  // F3 shortcut ke liye store
                      } else {
                          updateLastRatePill(null);
                      }
                  },
                  error: function() { updateLastRatePill(null); }
              });
          }

          // ── Average Price from sub_products_list ──
          const _avgProdId = data.prod_id || data.id;
          if (_avgProdId) {
              $.get("{% url 'sales:ajax_avg_purchase_price' %}", { prod_id: _avgProdId })
               .done(function(r) {
                   if (r.ok && r.avg > 0) {
                       $('#pibAvg').show().find('b').text(fmt2(r.avg));
                   } else {
                       $('#pibAvg').hide();
                   }
               })
               .fail(function() { $('#pibAvg').hide(); });
          }
          setTimeout(() => {
            
            if (settingsDict.show_warehouse) {
              const $specA = $tpl.find('.spec-a-select');
              if ($specA.length) {
                // NATIVE <select> hi rakho — koi select2 nahi (sahi position + sahi focus)
                if ($specA.data('select2')) { try { $specA.select2('destroy'); } catch(_){} }

                // sub-tenant assigned → already auto-picked → seedha qty par jao
                if (AUTO_SPEC_A_ID) {
                  const $fqA = settingsDict.pieces_wise_sale ? $tpl.find('.pcs-input') : $tpl.find('.qty-input');
                  if ($fqA.length) { $fqA.focus(); try { $fqA[0].select(); } catch(_){} }
                  return;
                }

                // agar kisi wajah se kuch select nahi hai → pehla option select karo
                if (!$specA.val() && $specA.find('option').length) {
                  $specA.prop('selectedIndex', 0).trigger('change');
                }
                // select2 ke close-focus ke BAAD native select ko focus do (40ms safety)
                setTimeout(() => { $specA.focus(); }, 40);
                return;
              }
            }

            // ✅ Check batch if warehouse is false
            if (!settingsDict.show_warehouse && settingsDict.show_batch) {
              const $specB = $tpl.find('.spec-b-select');
              if ($specB.length) {
                // Check if any variant has stock (on_hand > 0)
                const rowObj = $tpl.data('rowObj') || {};
                const variants = rowObj._variants || [];
                const hasStockVariant = variants.some(v => Number(v.stock_on_hand ?? v.on_hand ?? 0) > 0);
                
                // If NO variant has stock in sale mode, skip to qty
                const isSaleMode = !isReturnMode();
                if (isSaleMode && !hasStockVariant) {
                  const $fqB = settingsDict.pieces_wise_sale ? $tpl.find('.pcs-input') : $tpl.find('.qty-input');
                  if ($fqB.length) { $fqB.focus(); try { $fqB[0].select(); } catch(_){} }
                  return;
                }
                
                // Initialize select2 based on sale type
                if (!$specB.data('select2')) {
                  if (isSaleMode) {
                    // Cash/Credit: Fixed dropdown, no search
                    $specB.select2({
                      theme: 'bootstrap4',
                      width: '100%',
                      placeholder: 'Select Batch',
                      minimumResultsForSearch: Infinity,  // Hide search box
                      dropdownCssClass: 'spec-dropdown-wide'
                    });
                  } else {
                    // Return mode: Searchable dropdown
                    $specB.select2({
                      theme: 'bootstrap4',
                      width: '100%',
                      placeholder: 'Search Batch',
                      dropdownCssClass: 'spec-dropdown-wide'
                    });
                  }
                }
                
                try {
                  $specB.select2('open');
                  // Only auto-type for return mode (searchable)
                  if (!isSaleMode) {
                    setTimeout(() => {
                      const el = document.querySelector('.select2-container--open .select2-search__field');
                      if (el) {
                        typeAThenBackspace(el, 50);
                      }
                    }, 0);
                  }
                } catch(err) {
                  console.warn('Spec B select2 open failed:', err);
                  $specB.focus();
                }
                return;
              }
            }

            // ✅ Default: pieces_wise_sale → pcs focus, warna qty
            var $fDefault = settingsDict.pieces_wise_sale
                ? $tpl.find('.pcs-input')
                : $tpl.find('.qty-input');
            if ($fDefault.length) {
              $fDefault.focus();
              try { $fDefault[0].select(); } catch(_){}
            }
          }, 0);
          
          primeVariantsForRow($tpl);
      })

      .on('select2:close', () => {
        // No-op on close to avoid overriding the new selection
      })

      // ROW‐RECALC helper
      function rowRecalc() {
          // ── First: update variant selection from spec dropdowns ──
          pickVariantFromSpecs($tpl);
          
          const zeroStockAllow = String(settingsDict.zero_stock_allow).toLowerCase() === 'true';

          
          const codeVal = (rowObj.code || $tpl.find('.code-input').val() || '').toString().trim();
          if (!codeVal) {
              $tpl.find('.total-display').text('0.00');
              return;
          }

          // ppp: rowObj.p_per_pack reliable hai (DOM field update nahi hota after product select)
          const ppp = parseInt(rowObj.p_per_pack || +$tpl.find('.p-pack-input').val() || 1, 10) || 1;
          let q, pc;

          if (settingsDict.pieces_wise_sale) {
            // Feature 3: Qty hidden, PCS column primary
            // User enters 36 pcs → units = 36/ppp = 36/24 = 1.5
            q  = 0;
            pc = +$tpl.find('.pcs-input').val() || 0;
          } else if (ppp > 1 && !settingsDict["show_pcs"]) {
            // Feature 1: Cotton.Pcs format — ONLY jab pcs column visible nahi
            // "1.12" @ ppp=24 → 1.5 units
            var _pw = parsePcsAwareQty($tpl.find('.qty-input').val(), ppp);
            q  = _pw.totalUnits;
            pc = 0;
          } else {
            // Normal mode — qty + pcs dono use hote hain
            q  = +$tpl.find('.qty-input').val() || 0;
            pc = settingsDict["show_pcs"] ? (+$tpl.find('.pcs-input').val() || 0) : 0;
          }

          // ── qty > cotton_size → price automatically whole_sale_price par ──
          // cotton_size 0 ya 1 ho to normal behavior (wholesale shift nahi) —
          // sirf cotton_size > 1 par ye rule chalta hai.
          if (settingsDict.shift_to_wholesale_rate_on_cotton_qty) {
            const cottonSize = +(rowObj.cotton_size || 0);
            if (cottonSize > 1) {
              const totalUnitsForCotton = q + ((1 / ppp) * pc);
              const wsPrice = +(rowObj.whole_sale_price || 0);
              if (totalUnitsForCotton > cottonSize && wsPrice > 0) {
                if (+$tpl.find('.price-input').val() !== wsPrice) {
                  $tpl.find('.price-input').val(wsPrice);
                  rowObj.price = wsPrice;
                  rowObj._cottonAutoShifted = true;
                }
              } else if (rowObj._cottonAutoShifted) {
                // qty wapas cotton_size se neeche aa gayi — jo shift humne khud
                // kiya tha, wapas normal (l_sale) price par le aao. Manually
                // typed price ko yahan touch nahi karte.
                const lsPrice = +(rowObj._l_sale_price || 0);
                $tpl.find('.price-input').val(lsPrice);
                rowObj.price = lsPrice;
                rowObj._cottonAutoShifted = false;
              }
            }
          }

          let bn  = settingsDict["show_bonus"] ? (+$tpl.find('.bonus-input').val() || 0) : 0;
          const bags_v = settingsDict["show_bags_columns"] ? (+$tpl.find('.bags-input').val() || 0) : 0;
          const pr  = +$tpl.find('.price-input').val() || 0;
          const gst = settingsDict["show_gst"]   ? (+$tpl.find('.gst-input').val()   || 0) : 0;
          const ft  = settingsDict["show_f_tax"] ? (+$tpl.find('.ftax-input').val()  || 0) : 0;
          const di  = settingsDict["show_disc"]  ? (+$tpl.find('.disc-input').val()  || 0) : 0;
          const to  = settingsDict["show_to"]    ? (+$tpl.find('.to-input').val()    || 0) : 0;

          const presentStock = parseFloat(rowObj.present_stock) || 0;

          // ====== VARIANT-LEVEL STOCK VALIDATION ======
          const selectedVariantId = toIntSafe($tpl.find('.variant-id-input').val() || rowObj.variant_id || 0);
          let variantOnHand = presentStock; // default to product stock
          let variantBonus = 9999999; // default unlimited if no variant
          
          if (selectedVariantId && rowObj._variants && rowObj._variants.length) {
            const selectedVar = rowObj._variants.find(v => toIntSafe(v.id) === selectedVariantId);
            if (selectedVar) {
              variantOnHand = Number(selectedVar.stock_on_hand ?? selectedVar.on_hand ?? 0);
              variantBonus = Number(selectedVar.stock_bonus ?? selectedVar.bonus ?? 9999999);
            }
          }

          // ====== STOCK VALIDATION ======
          if (!zeroStockAllow) {

              // ESTIMATE or RETURN modes skip caps altogether
              const skipStockCheck = (typeof isEstimateMode === 'function' && isEstimateMode()) ||
                                     (typeof isReturnMode   === 'function' && isReturnMode()) || (initialSale && initialSale.flat_discount != null);

              if (!skipStockCheck){

                // ── BONUS VALIDATION (against variant bonus stock) ──
                if (bn > variantBonus) {
                  const now = Date.now();
                  if (!rowObj._lastBonusAlert || (now - rowObj._lastBonusAlert) > 1500) {
                    rowObj._lastBonusAlert = now;
                    Swal.fire({
                      icon: 'warning',
                      title: 'Insufficient Bonus Stock!',
                      html: `Only <strong>${Math.round(variantBonus)}</strong> bonus available for this variant.<br>Bonus has been adjusted.`,
                      confirmButtonText: 'OK',
                      timer: 3000,
                      timerProgressBar: true
                    });
                  }
                  bn = Math.floor(variantBonus);
                  if (settingsDict["show_bonus"]) $tpl.find('.bonus-input').val(bn);
                }

                // Total units entered (qty + pcs converted to units) - bonus is separate
                let totalQtyUnits = q + ((1/ppp) * pc);

                // CASE 1: No stock available at all
                if (variantOnHand <= 0 && totalQtyUnits > 0 && !isReturnMode()) {
                    // Prevent showing repeated alerts - use a debounce flag
                    const now = Date.now();
                    if (!rowObj._lastStockAlert || (now - rowObj._lastStockAlert) > 1500) {
                        rowObj._lastStockAlert = now;
                        
                        Swal.fire({
                            icon: 'error',
                            title: 'No Stock Available!',
                            text: `"${rowObj.name || rowObj.code}" has no stock available for sale.`,
                            confirmButtonText: 'OK',
                            timer: 3000,
                            timerProgressBar: true
                        });
                    }
                    
                    // Reset all quantity fields to 0
                    q = 0; 
                    pc = 0; 
                    bn = 0;
                    
                    $tpl.find('.qty-input').val(0);
                    if (settingsDict["show_pcs"]) $tpl.find('.pcs-input').val(0);
                    if (settingsDict["show_bonus"]) $tpl.find('.bonus-input').val(0);
                
                }
                // CASE 2: Entered quantity exceeds available stock
                // CASE 2: Entered quantity exceeds available variant stock
                else if (variantOnHand > 0 && totalQtyUnits > variantOnHand) {
                    // Prevent repeated alerts
                    const now = Date.now();
                    if (!rowObj._lastStockAlert || (now - rowObj._lastStockAlert) > 1500) {
                        rowObj._lastStockAlert = now;
                        
                        Swal.fire({
                            icon: 'warning',
                            title: 'Insufficient Stock!',
                            html: `Only <strong>${Math.round(variantOnHand)}</strong> units available for this variant.<br>Quantity has been adjusted.`,
                            confirmButtonText: 'OK',
                            timer: 3000,
                            timerProgressBar: true
                        });
                    }
                    
                    // Adjust qty to maximum available (keep bonus as is, already validated)
                    pc = 0;
                    
                    // Set qty to max available variant stock (floor to avoid decimals)
                    q = Math.floor(variantOnHand);
                    
                    $tpl.find('.qty-input').val(q);
                    if (settingsDict["show_pcs"]) $tpl.find('.pcs-input').val(0);
                    
                }
            }
          }
          // ====== END STOCK VALIDATION ======
        let units    = q+ ((1/ppp) * pc);

        let baseVal  = pr;
        let before_tax_discoun_per = baseVal * 0.01 * di
        let beforeTaxVal = baseVal - before_tax_discoun_per - to

        // 3rd Schedule: GST placeholder only — calculation mein zero
        const _gst_amt = (rowObj.fbr_sale_type || '').indexOf('3rd Schedule') !== -1
                         ? 0
                         : beforeTaxVal * gst / 100;
        let taxed = beforeTaxVal + _gst_amt + (beforeTaxVal * ft / 100);

        let finalVal = taxed * units;


        if (settingsDict.pieces_wise_sale) {
          rowObj.qty = units;    // = 2.0 (backend sirf yeh use karta hai stock ke lea)
          rowObj.pcs = 0;        // = 0 (qty mein already absorb ho chuki, alag bhejne ki zaroorat nahi)
        } else if (ppp > 1 && !settingsDict["show_pcs"]) {
          // Cotton.Pcs format: qty = totalUnits, pcs column nahi
          rowObj.qty = q;
          rowObj.pcs = 0;
        } else {
          // Normal mode: qty aur pcs alag alag save hote hain
          rowObj.qty = q;
          if (settingsDict["show_pcs"]) rowObj.pcs = pc;
        }
        if(settingsDict.show_bonus) rowObj.bonus = bn;
        if(settingsDict.show_bags_columns) rowObj.bags = bags_v;
        
        // Weight is calculated separately via input handlers, not here

        // Validate against minimum_rate_lock
        const minRate = +(rowObj.minimum_rate_lock || 0);
        if (minRate > 0 && pr < minRate && pr > 0) {
          pr = minRate;
          $tpl.find('.price-input').val(minRate);
          if (!rowObj._minRateAlerted) {
            rowObj._minRateAlerted = true;
            Swal.fire({
              icon: 'warning',
              title: 'Minimum Rate Lock',
              text: `Price cannot be less than ${minRate}`,
              timer: 2000,
              showConfirmButton: false
            });
            setTimeout(() => { rowObj._minRateAlerted = false; }, 3000);
          }
        }
        rowObj.price = pr;
        if(settingsDict.show_gst)   rowObj.gst   = gst;
        if(settingsDict.show_f_tax) rowObj.f_tax = ft;
        rowObj.disc  = di;
        rowObj.to    = to;

        rowObj.total = +finalVal.toFixed(2);
        $tpl.find('.total-display').text(rowObj.total.toFixed(2));

        // ── AUTO LOADING: Recalculate on qty/pcs change ──
        if (settingsDict.auto_loading && _editLoadComplete) {
          let autoLoadingTotal = 0;
          sale.products.forEach(p => {
            const itemQty = +(p.qty || 0);
            const itemPcs = +(p.pcs || 0);
            const ppp = +(p.p_per_pack || 1) || 1;
            const loading = +(p.loading || 0);
            
            // Convert pcs to qty units
            const pcsAsQty = itemPcs / ppp;
            const totalUnits = itemQty + pcsAsQty;
            
            // Multiply by loading
            autoLoadingTotal += totalUnits * loading;
          });
          $('#other_charges').val(autoLoadingTotal.toFixed(2));
        }

        recalcAll();
        setHudStockPrice(rowObj.present_stock, rowObj.purchase_price);
      }

      const selList = [
         settingsDict["show_warehouse"]         ? '.spec-a-select'              : null,
         settingsDict["show_batch"]             ? '.spec-b-select'              : null,
         settingsDict.pieces_wise_sale          ? null                       : '.qty-input',
         settingsDict["show_bags_columns"]      ? '.bags-input'             : null,
         (settingsDict["show_pcs"] || settingsDict.pieces_wise_sale) ? '.pcs-input' : null,
         settingsDict["show_bonus"]             ? '.bonus-input'            : null,
         settingsDict["show_weight_or_meters"]  ? '.weight-input'           : null,
         settingsDict["show_piece_wise_price"]  ? '.item-wise-price-input'  : null,
         '.price-input',
         settingsDict["show_gst"]               ? '.gst-input'              : null,
         settingsDict["show_f_tax"]             ? '.ftax-input'             : null,
         settingsDict["show_disc"]              ? '.disc-input'             : null,
         settingsDict["show_to"]                ? '.to-input'               : null
      ].filter(x=>x);

      selList.forEach(sel=>{
        $tpl.find(sel).val(rowObj[sel.replace(/-input|\./g,'')] || 0)
          .on('keyup change', rowRecalc)
          .on('keypress', function(e){
            if (!isEnterOrTab(e)) return;
            e.preventDefault();

            const $inputs = $tpl.find('input:visible, select:visible');
            const idx = $inputs.index(this);

            // If not last, go to next field in the row
            if (idx < $inputs.length - 1) {
              $inputs.eq(idx + 1).focus();
              return;
            }

            // If LAST field: we let our dedicated .to-input handler handle row creation.
            // Prevent any other last-field logic here to avoid double-creation.
            if ($(this).is('.to-input')) {
              e.stopImmediatePropagation();
              e.stopPropagation();
              return;
            }
   
            // (Optional fallback) → create next row only if allowed
            if (!canCreateNextRow($tpl)) return;
            if (__focusEmptyTailIfAny()) return;          // <-- NEW
            const $new = addRow();
            switch (settingsDict.barcode) {
              case "0":
                $new.find('.search-product').select2('open');
                setTimeout(()=>{ document.querySelector('.select2-container--open .select2-search__field')?.focus(); },0);
                break;
              case "2":
                try {
                  $new.find('.code-input').select2('open');
                  setTimeout(()=>{ document.querySelector('.select2-container--open .select2-search__field')?.focus(); },0);
                } catch(_) { $new.find('.code-input').focus(); }
                break;
              default:
                $new.find('.code-input').focus();
            }
          });
        });

      // ── pcs-input explicit binding (pieces_wise_sale AND normal show_pcs dono) ──
      if (settingsDict.pieces_wise_sale || settingsDict["show_pcs"]) {
        $tpl.find('.pcs-input')
          .off('input.pws')
          .on('input.pws', function() { rowRecalc(); });
      }

      // Minimum rate lock validation on price-input
      // Minimum rate lock + alert_low_rate validation on price-input
      $tpl.find('.price-input').on('input change blur', function() {
        const enteredPrice = +$(this).val() || 0;

        // alert_low_rate: price < purchase cost → cell highlight
        if (String(settingsDict.alert_low_rate).toLowerCase() === 'true') {
          const buyPrice = +(rowObj.purchase_price || 0);
          if (buyPrice > 0 && enteredPrice > 0 && enteredPrice < buyPrice) {
            $(this).css({ 'border': '2px solid #dc2626', 'background': '#fff1f2', 'color': '#991b1b' });
          } else {
            $(this).css({ 'border': '', 'background': '', 'color': '' });
          }
        }

        // minimum_rate_lock (only on change/blur, not on every keystroke)
        if (this.type !== 'input') {   // blur ya change pe
          const minRate = +(rowObj.minimum_rate_lock || 0);
          if (minRate > 0 && enteredPrice > 0 && enteredPrice < minRate) {
            Swal.fire({
              icon: 'warning',
              title: 'Minimum Rate Lock',
              text: `Price cannot be less than ${minRate}. Setting to minimum rate.`,
              timer: 2500,
              showConfirmButton: false
            });
            $(this).val(minRate).css({ 'border': '', 'background': '', 'color': '' });
            rowObj.price = minRate;
            rowRecalc();
          }
        }
      });


      $tpl.find('.price-input, .disc-input')
        // Most mobiles fire key events sometimes
        .on('keydown keypress', function(e){
          hideMultiBranchStock();
          if (!isMobile()) return;
          if (!isEnterOrTab(e)) return;

          const $row = $(this).closest('tr');
          // Only if THIS is the last editable control in row
          if (!__isLastEditableInRow($row, this)) return;

          e.preventDefault();
          e.stopImmediatePropagation();
          e.stopPropagation();
          ensureNextRowFocusOrCreate();          // guarded (stock/empty/tail-empty)
          setTimeout(scrollTableLeftOrigin, 0);  // keep left columns in view on small screens
        })
        // Fallback for soft keyboards where "Next" doesn't fire key events
        .on('blur', function(){
          if (!isMobile()) return;
          if (__pointerDown) return; // user tapped elsewhere intentionally

          const $row = $(this).closest('tr');
          if (!__isLastEditableInRow($row, this)) return;

          ensureNextRowFocusOrCreate();
          setTimeout(scrollTableLeftOrigin, 0);
        });

      $tpl.find('.spec-a-select, .spec-b-select')
        .on('select2:select select2:close', function(e){
          // Only jump to qty on actual selection, not just close
          if (e.type === 'select2:select') {
            setTimeout(() => {
              // ✅ Default: qty ya pcs focus (pieces_wise_sale ke mutabiq)
            const $fqD = settingsDict.pieces_wise_sale ? $tpl.find('.pcs-input') : $tpl.find('.qty-input');
            if ($fqD.length) { $fqD.focus(); try { $fqD[0].select(); } catch(_){} }
          }, 0);
          }
        })
        .on('keydown', function(e){
          if (e.key === 'Enter') {
            const s2 = $(this).data('select2');
            const isOpen = s2 && s2.isOpen();
            
            // If closed, or open but no highlighted result → move to qty
            if (!isOpen) {
              e.preventDefault();
              const $qty = $tpl.find('.qty-input');
              if ($qty.length) {
                $qty.focus();
                try { $qty[0].select(); } catch(_){}
              }
            } else {
              // Select2 is open - check if any result is highlighted
              const $highlighted = $('.select2-results__option--highlighted');
              if (!$highlighted.length) {
                // No highlighted option (empty/no results) → close and move to qty
                e.preventDefault();
                e.stopPropagation();
                $(this).select2('close');
                setTimeout(() => {
                  const $qty = $tpl.find('.qty-input');
                  if ($qty.length) {
                    $qty.focus();
                    try { $qty[0].select(); } catch(_){}
                  }
                }, 50);
              }
              // else: let select2 handle selection normally
            }
          }
        });


        // Mobile-safe: on Disc Amt (to-input), Enter/Tab OR soft-keyboard "Next"
        $tpl.find('.to-input')
          // desktop + some mobiles
          .on('keydown keypress', function(e){
            if (!isEnterOrTab(e)) return;
            e.preventDefault();
            e.stopImmediatePropagation();
            e.stopPropagation();
            ensureNextRowFocusOrCreate();
          })
          // fallback for mobiles where key events don't fire for "Next"
          .on('blur', function(){
            if (__pointerDown) return;           // user tapped elsewhere intentionally
            setTimeout(ensureNextRowFocusOrCreate, 0); // pull focus back to the row flow
          });


        // ══════════════════════════════════════════════════════════════
        // VCODE (SKU / Serial) — Enter key → resolve & load item into row
        // ══════════════════════════════════════════════════════════════
        $tpl.on('keydown', '.vcode-input', function(e){
          if ((e.key || e.which) !== 'Enter' && e.which !== 13) return;

          // Stop the generic input:visible/select:visible handler (below)
          // from ALSO firing for this same Enter press.
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();

          const $vcode = $(this);
          const code = ($vcode.val() || '').trim();
          if (!code) return;

          function notFoundAlert(){
            Swal.fire({
              icon: 'error',
              title: 'Not Found',
              text: `No item found for "${code}" (SKU/Serial).`,
              confirmButtonText: 'OK',
              timer: 2500,
              timerProgressBar: true
            });
            setTimeout(() => { $vcode.focus(); try { $vcode[0].select(); } catch(_){} }, 0);
          }

          function lookupBySku(){
            $.ajax({
              url: "{% url 'sales:ajax_variant_resolve' %}",
              headers: { 'X-CSRFToken': csrftoken },
              data: { sku: code },
              success(res2){
                if (res2 && res2.ok) loadCodeOrSerialIntoRow($tpl, res2, false);
                else notFoundAlert();
              },
              error: notFoundAlert
            });
          }

          $.ajax({
            url: "{% url 'sales:ajax_serial_resolve' %}",
            headers: { 'X-CSRFToken': csrftoken },
            data: { serial: code },
            success(res){
              if (res && res.ok) loadCodeOrSerialIntoRow($tpl, res, true);
              else lookupBySku();
            },
            error: lookupBySku
          });
        });

        // DELETE
        $tpl.find('.btn-del').click(()=>{
          const $rows = $('#table_products tbody tr').not('.template-row');
          if ($rows.length > 1) {
            // remove from our data and DOM
            sale.products = sale.products.filter(o => o !== rowObj);
            $tpl.remove();
            recalcAll();
          }
        });

         // if you passed data (i.e. edit-mode), immediately fill it…
         if (data) {
           fillRow($tpl, data);
         }


        $tpl.on('keydown', 'input:visible, select:visible', function(e) {
          if (!isEnterOrTab(e)) return;

          // Price ko hum upar handle kar chukay (mobile + barcode "0")
          if (isMobile() && settingsDict.barcode === "0" && $(e.target).is('.price-input')) return;

          // Disc Amt ka dedicated handler bhi alag hai
          if ($(e.target).is('.to-input')) return;

          const $fields = $tpl.find('input:visible, select:visible');
          const idx = $fields.index(this);

          if (idx === $fields.length - 1) {
            e.preventDefault();

            if (!canCreateNextRow($tpl)) return;
            if (__focusEmptyTailIfAny()) return;     // <-- NEW

            const $new = addRow();
            focusFirstFieldForRow($new);
            if (isMobile() && settingsDict.barcode === "0") {
              setTimeout(scrollTableLeftOrigin, 0);
            }
          }
        });

        $('#table_products tbody').append($tpl);
        sale.products.push(rowObj);
        recalcAll();

        // at the end of addRow(), just before `return $tpl;`
        if (settingsDict.show_piece_wise_price) {
          $tpl
            .find('.item-wise-price-input')
            .on('keyup change', function() {
              const iwp = +$(this).val() || 0;
              if (iwp > 0){
                rowObj.item_wise_price = iwp;
                const ppp = +$tpl.find('.p-pack-input').val() || 1;
                const newPrice = +(iwp * ppp).toFixed(2);
                // rowObj.price = newPrice;
                // // $tpl.find('.price-input').val(newPrice);
                // rowRecalc();
                rowObj.price = newPrice;
                $tpl.find('.price-input').val(newPrice);

                // now recalc totals for this row + grand
                rowRecalc();

                setHudStockPrice(rowObj.present_stock, rowObj.purchase_price);


              }
            });
        }

        // Weight input change handler - reverse calculate qty + pcs from weight
        if (settingsDict.show_weight_or_meters) {
          $tpl.find('.weight-input').on('keyup change', function() {
            // Skip if triggered programmatically from qty/pcs calculation
            if (rowObj._qtyUpdating) return;
            
            const weightVal = +$(this).val() || 0;
            const packets = +(rowObj.packets || 0);
            
            rowObj.weight = weightVal;
            
            if (packets > 0 && weightVal > 0) {
              const ppp = +(rowObj.p_per_pack || 1) || 1;
              const totalUnits = weightVal / packets;  // Total qty in decimal
              const qtyInt = Math.floor(totalUnits);   // Whole qty
              const pcsVal = Math.round((totalUnits - qtyInt) * ppp);  // Remaining as pcs
              
              // Set flag to prevent circular update
              rowObj._weightUpdating = true;
              
              // Update qty and pcs inputs
              $tpl.find('.qty-input').val(qtyInt);
              rowObj.qty = qtyInt;
              
              if (settingsDict.show_pcs) {
                $tpl.find('.pcs-input').val(pcsVal);
                rowObj.pcs = pcsVal;
              }
              
              rowObj._weightUpdating = false;
              
              // Trigger recalc for totals (but not weight)
              rowRecalc();
            } else if (weightVal === 0) {
              // Clear qty/pcs when weight is 0
              rowObj._weightUpdating = true;
              $tpl.find('.qty-input').val(0);
              rowObj.qty = 0;
              if (settingsDict.show_pcs) {
                $tpl.find('.pcs-input').val(0);
                rowObj.pcs = 0;
              }
              rowObj._weightUpdating = false;
              rowRecalc();
            }
          });
        }

        // Qty/Pcs change → calculate weight
        if (settingsDict.show_weight_or_meters) {
          $tpl.find('.qty-input, .pcs-input').on('keyup change', function() {
            // Skip if triggered programmatically from weight calculation
            if (rowObj._weightUpdating) return;
            
            const packets = +(rowObj.packets || 0);
            if (packets > 0) {
              const q = +$tpl.find('.qty-input').val() || 0;
              const pc = settingsDict.show_pcs ? (+$tpl.find('.pcs-input').val() || 0) : 0;
              const ppp = +(rowObj.p_per_pack || 1) || 1;
              const weightVal = packets * (q + (pc / ppp));
              
              rowObj._qtyUpdating = true;
              $tpl.find('.weight-input').val(weightVal.toFixed(2));
              rowObj.weight = weightVal;
              rowObj._qtyUpdating = false;
            }
          });
        }


        // Lock price if custom_rate_allow feature is enabled

        if (!saleRateLock) {
            $tpl.find('.price-input').prop('readonly', true).css('background-color', '#e9ecef');
        }
        return $tpl;
    }

  // ══════════════════════════════════════════════════════════════
  // Ek serial = ek hi qty. Jab row kisi serial se linked ho, qty/pcs
  // ko 1 par lock kar do (readonly) taake user manually badha na sake.
  // ══════════════════════════════════════════════════════════════
  function lockRowQtyForSerial($row, isLocked) {
    const $qty = $row.find('.qty-input');
    const $pcs = $row.find('.pcs-input');
    if (isLocked) {
      $qty.val(1).prop('readonly', true).css('background-color', '#e9ecef');
      if ($pcs.length) $pcs.val(0).prop('readonly', true).css('background-color', '#e9ecef');
    } else {
      $qty.prop('readonly', false).css('background-color', '');
      if ($pcs.length) $pcs.prop('readonly', false).css('background-color', '');
    }
  }

  // ══════════════════════════════════════════════════════════════
  // Shared helper: takes the response from ajax_serial_resolve /
  // ajax_variant_resolve, fetches the full product payload (same
  // shape fillRow() already expects), then fills the row and stamps
  // variant_id / serial_id so save() picks them up correctly.
  // ══════════════════════════════════════════════════════════════
  function loadCodeOrSerialIntoRow($row, resolvedData, isSerial) {
    const productCode = resolvedData && resolvedData.product ? resolvedData.product.code : '';
    if (!productCode) return;

    $.ajax({
      url: "{% url 'products:search_product' %}",
      headers: { 'X-CSRFToken': csrftoken },
      data: { product_code: productCode },
      success(res) {
        if (res.error) {
          Swal.fire({
            icon: 'error', title: 'Item Load Failed', text: res.error,
            timer: 2500, timerProgressBar: true
          });
          return;
        }

        fillRow($row, res);
        const rowObj = $row.data('rowObj') || {};
        recalcAll();
        setHudStockPrice(rowObj.present_stock, rowObj.purchase_price);
        showMultiBranchStock(res.id || res.prod_id, res.product_code);

        // Variant binding (if SKU/serial resolved to a specific variant)
        if (resolvedData.variant && resolvedData.variant.id) {
          rowObj.variant_id = resolvedData.variant.id;
          $row.find('.variant-id-input').val(resolvedData.variant.id);
          if (resolvedData.variant.rate != null && +resolvedData.variant.rate > 0) {
            rowObj.price = +resolvedData.variant.rate;
            $row.find('.price-input').val(rowObj.price);
          }
        }

        // Serial binding — ek serial = ek hi qty
        if (isSerial && resolvedData.serial && resolvedData.serial.id) {
          rowObj.serial_id = resolvedData.serial.id;
          $row.find('.serial-id-input').val(resolvedData.serial.id);
          $row.find('.vcode-input').val(resolvedData.serial.serial_no || productCode);
          lockRowQtyForSerial($row, true);
        } else {
          rowObj.serial_id = null;
          $row.find('.serial-id-input').val('');
          lockRowQtyForSerial($row, false);
          if (resolvedData.variant && resolvedData.variant.sku) {
            $row.find('.vcode-input').val(resolvedData.variant.sku);
          }
        }

        setTimeout(() => {
          const $fq = settingsDict.pieces_wise_sale ? $row.find('.pcs-input') : $row.find('.qty-input');
          if ($fq.length) { $fq.focus(); try { $fq[0].select(); } catch(_){} }
        }, 0);
      },
      error() {
        Swal.fire({
          icon: 'error', title: 'Item Load Failed', text: 'Could not load item details.',
          timer: 2500, timerProgressBar: true
        });
      }
    });
  }

  // ══════════════════════════════════════════════════════════════
  // SERIAL PICKER — is_serial_tracked product select hone par
  // ══════════════════════════════════════════════════════════════
  window.__serialPickerData = [];
  window.__activeSerialPickRow = null;
  window.__serialPicked = false;
  window.__serialPickerActiveIndex = -1;

  // Search box mein auto-focus jab bhi dialog khule (kisi bhi trigger se)
  $(document).on('shown.bs.modal', '#serialPickerModal', function(){
    $('#serialPickerSearch').trigger('focus').select();
  });

  function maybeOpenSerialPicker($row, data) {
    if (!data || !data.is_serial_tracked) return;

    const prodId = data.prod_id || data.id;
    if (!prodId) return;

    window.__activeSerialPickRow = $row;
    window.__serialPicked = false;
    window.__serialPickerData = [];

    $('#serialPickerSearch').val('');
    $('#serialPickerProductName').text(data.name || data.text || '');
    $('#serialPickerLoading').show();
    $('#serialPickerList').empty().hide();
    $('#serialPickerEmpty').hide();
    $('#serialPickerModal').modal('show');

    $.get("{% url 'sales:ajax_serials_for_product' %}", { product_id: prodId })
      .done(function(res){
        $('#serialPickerLoading').hide();
        window.__serialPickerData = (res && res.ok) ? (res.serials || []) : [];
        renderSerialPickerList(window.__serialPickerData);
      })
      .fail(function(){
        $('#serialPickerLoading').hide();
        window.__serialPickerData = [];
        $('#serialPickerEmpty').text('Failed to load serials.').show();
      });
  }

  function renderSerialPickerList(list) {
    const $ul = $('#serialPickerList');
    $ul.empty();
    window.__serialPickerActiveIndex = -1;
    if (!list.length) {
      $('#serialPickerEmpty').text('No serial in stock for this item.').show();
      $ul.hide();
      return;
    }
    $('#serialPickerEmpty').hide();
    list.forEach(function(s){
      const $item = $('<button type="button" class="list-group-item list-group-item-action serial-pick-item"></button>')
        .attr('data-id', s.id);

      const $row1 = $('<div class="d-flex justify-content-between align-items-center"></div>');
      $('<span class="font-weight-bold"></span>').text(s.serial_no).appendTo($row1);
      $('<span class="text-muted small"></span>').text(s.received_at || '').appendTo($row1);
      $item.append($row1);

      const descParts = [s.description1, s.description2].filter(function(d){ return (d || '').trim(); });
      if (descParts.length) {
        $('<div class="text-muted" style="font-size:.72rem;"></div>').text(descParts.join('  •  ')).appendTo($item);
      }

      $ul.append($item);
    });
    $ul.show();
    highlightSerialPickerItem(0);
  }

  function highlightSerialPickerItem(idx) {
    const $items = $('#serialPickerList .serial-pick-item:visible');
    $items.removeClass('sp-hl');
    if (!$items.length) { window.__serialPickerActiveIndex = -1; return; }
    if (idx < 0) idx = 0;
    if (idx > $items.length - 1) idx = $items.length - 1;
    window.__serialPickerActiveIndex = idx;

    const $target = $items.eq(idx).addClass('sp-hl');
    const $list = $('#serialPickerList');
    const itemTop = $target.position().top + $list.scrollTop();
    const itemBottom = itemTop + $target.outerHeight();
    if (itemTop < $list.scrollTop()) {
      $list.scrollTop(itemTop);
    } else if (itemBottom > $list.scrollTop() + $list.height()) {
      $list.scrollTop(itemBottom - $list.height());
    }
  }

  $(document).on('input', '#serialPickerSearch', function(){
    const term = ($(this).val() || '').trim().toLowerCase();
    const all = window.__serialPickerData || [];
    const filtered = term ? all.filter(s => (s.serial_no || '').toLowerCase().indexOf(term) !== -1) : all;
    renderSerialPickerList(filtered);
  });

  $(document).on('keydown', '#serialPickerSearch', function(e){
    const $items = $('#serialPickerList .serial-pick-item:visible');
    if (!$items.length) return;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      highlightSerialPickerItem(window.__serialPickerActiveIndex + 1);
      return;
    }
    if (e.key === 'ArrowUp') {
      e.preventDefault();
      highlightSerialPickerItem(window.__serialPickerActiveIndex - 1);
      return;
    }
    if (e.key === 'Enter') {
      e.preventDefault();
      const idx = (window.__serialPickerActiveIndex >= 0) ? window.__serialPickerActiveIndex : 0;
      $items.eq(idx).trigger('click');
    }
  });

  $(document).on('click', '.serial-pick-item', function(){
    const id = $(this).data('id');
    const s = (window.__serialPickerData || []).find(x => String(x.id) === String(id));
    const $row = window.__activeSerialPickRow;
    if (!s || !$row || !$row.length) { $('#serialPickerModal').modal('hide'); return; }

    const rowObj = $row.data('rowObj') || {};
    rowObj.serial_id = s.id;
    $row.find('.serial-id-input').val(s.id);
    $row.find('.vcode-input').val(s.serial_no);

    if (s.variant_id) {
      rowObj.variant_id = s.variant_id;
      $row.find('.variant-id-input').val(s.variant_id);
    }
    if (s.rate != null && +s.rate > 0) {
      rowObj.price = +s.rate;
      $row.find('.price-input').val(rowObj.price);
    }

    // Ek serial = ek hi qty
    rowObj.qty = 1;
    lockRowQtyForSerial($row, true);
    $row.find('.qty-input').trigger('change');

    window.__serialPicked = true;
    $('#serialPickerModal').modal('hide');

    setTimeout(() => {
      const $fq = settingsDict.pieces_wise_sale ? $row.find('.pcs-input') : $row.find('.qty-input');
      if ($fq.length) { $fq.focus(); try { $fq[0].select(); } catch(_){} }
    }, 150);
  });

  // Modal band hui bina serial select kiye → is_serial_tracked item ke lea
  // serial zaroori hai, is lea row ka product selection revert kar do.
  $(document).on('hidden.bs.modal', '#serialPickerModal', function(){
    if (window.__serialPicked) return;
    const $row = window.__activeSerialPickRow;
    if (!$row || !$row.length) return;

    const rowObj = $row.data('rowObj') || {};
    rowObj.id = null; rowObj.code = ''; rowObj.name = '';
    rowObj.serial_id = null; rowObj.variant_id = null;
    $row.find('.serial-id-input').val('');
    $row.find('.variant-id-input').val('');
    $row.find('.vcode-input').val('');
    $row.find('.code-input').val('');
    $row.find('.price-input').val('');
    lockRowQtyForSerial($row, false);
    $row.find('.search-product').empty().trigger('change.select2');

    Swal.fire({
      icon: 'info',
      title: 'Serial Required',
      text: 'Is item ke liye serial select karna zaroori hai.',
      confirmButtonText: 'OK',
      timer: 2500,
      timerProgressBar: true
    });

    setTimeout(() => {
      const $nameSel = $row.find('.search-product');
      if ($nameSel.length) $nameSel.select2('open');
    }, 300);
  });

  function fillRow($tr, d) {
      const rowObj = $tr.data('rowObj');
      if (!rowObj) {
        console.error("⚠️ fillRow(): missing rowObj", $tr);
        return;
      }

      // 1) stamp identifiers
      rowObj.id   = d.id;
      rowObj.code = d.product_code || d.code || "";
      // rowObj.name = d.text         || d.name || "";
      rowObj.name = d.name         || d.text || "";
      rowObj.present_stock = + (d.present_stock || 0);

      // 2) Code input
      $tr.find('.code-input').val(rowObj.code);
      // If code-select exists (barcode=0), reflect selection there too
      const $codeSel = $tr.find('.code-select');
      if ($codeSel.length) {
        const optText = rowObj.code ? `${rowObj.code} — ${rowObj.name}` : (rowObj.name || '');
        const opt = new Option(optText, rowObj.id, true, true);
        // store original data on option (helps if you read it later)
        $(opt).data('data', d);
        $codeSel.append(opt).trigger('change');
      }

      const $nameSel = $tr.find('.search-product');
      $nameSel.empty();
      $nameSel.append(new Option(rowObj.name, rowObj.id, true, true)).trigger('change.select2');

      // 4) Qty
      const qtyVal = (d.qty != null ? d.qty : 1);
      rowObj.qty   = +qtyVal;
      var _fillPpp = parseInt(d.p_per_pack || d.pieces_per_pack || 1, 10) || 1;

      if (settingsDict.pieces_wise_sale) {
        // d.qty (integer part) + d.pcs (fractional pieces) dono milake total pcs banaao
        var _totalUnitsLoad = +qtyVal + (+(d.pcs || 0)) / _fillPpp;
        var _pcsDisplay     = Math.round(_totalUnitsLoad * _fillPpp);
        $tr.find('.qty-input').val(0);
        $tr.find('.pcs-input').val(_pcsDisplay);
        rowObj.pcs = _pcsDisplay;
      } else if (_fillPpp > 1) {
        $tr.find('.qty-input').val(formatPcsAwareQty(+qtyVal, _fillPpp));
      } else {
        $tr.find('.qty-input').val(qtyVal);
      }

      // 5) Price — pick the right field for your rate_type
      let priceVal = +(
        (function(){
          switch($('#rate_type').val()) {
            case 'wholesale':    return d.whole_sale_price;
            case 'supplier':     return d.supplier_price;
            case 'branches':     return d.branches_price;
            case 'type_1':     return d.type_1 || d.l_sale_price;
            case 'type_2':     return d.type_2 || d.l_sale_price;
            case 'type_3':     return d.type_3 || d.l_sale_price;
            case 'type_4':     return d.type_4 || d.l_sale_price;
            case 'type_5':     return d.type_5 || d.l_sale_price;
            default:             return d.l_sale_price || d.price;
          }
        })() || 0
      );
      if (priceVal <= 0){
        priceVal = d.l_sale_price || d.price
      }
      rowObj.price = priceVal;
      $tr.find('.price-input').val(priceVal);

      // 6) Optional columns
      // pieces_wise_sale mode mein pcs-input already step 4 mein set ho chuka — override mat karo
      if (settingsDict.show_pcs && !settingsDict.pieces_wise_sale) {
        rowObj.pcs = d.pcs || 0;
        $tr.find('.pcs-input').val(rowObj.pcs);
      }
      if (settingsDict.show_bonus) { rowObj.bonus = d.bonus || 0; $tr.find('.bonus-input').val(rowObj.bonus); }
      if (settingsDict.show_bags_columns) { rowObj.bags = d.bags_qty || d.bags || 0; $tr.find('.bags-input').val(rowObj.bags); } 
      if (settingsDict.show_gst)   { rowObj.gst   = d.gst   || 0; $tr.find('.gst-input').val(rowObj.gst); }
      // if (settingsDict.show_f_tax) {
      //   const _saleType   = ($('#sale_type').val() || '').toLowerCase();
      //   const _custStrNo  = (window._selectedCustomerStrNo || '').trim();
      //   const _isCreditSale = (_saleType === 'credit' || _saleType === 'credit_return');
 
      //   // Credit sale + customer ka str_no maujood hai → further tax zero
      //   rowObj.f_tax = (_isCreditSale && _custStrNo.length > 0) ? 0 : (d.f_tax || 0);
      //   $tr.find('.ftax-input').val(rowObj.f_tax);
      // }
      if (settingsDict.show_f_tax) {
        const _saleType     = ($('#sale_type').val() || '').toLowerCase();
        const _custStrNo    = (window._selectedCustomerStrNo || '').trim();
        const _isCreditSale = (_saleType === 'credit' || _saleType === 'credit_return');

        // d.f_tax (purana naam) ya d.further_tax (backend ka actual naam) — dono handle karo
        const _rawFTax = +(d.f_tax || d.further_tax || 0);

        // Credit sale + customer ka str_no hai → further tax zero
        rowObj.f_tax = (_isCreditSale && _custStrNo.length > 0) ? 0 : _rawFTax;
        $tr.find('.ftax-input').val(rowObj.f_tax);
      }

      // rowObj.item_wise_price = d.item_wise_price || 0;
      // $tr.find('.item-wise-price-input').val(rowObj.item_wise_price);

      // Auto-calculate Pcs-Price = Price / p_per_pack
      if (settingsDict.show_piece_wise_price) {
        const ppp_calc = d.p_per_pack || d.pieces_per_pack || rowObj.p_per_pack || 1;
        rowObj.item_wise_price = (ppp_calc > 0) ? +(priceVal / ppp_calc).toFixed(2) : priceVal;
      } else {
        rowObj.item_wise_price = d.item_wise_price || 0;
      }
      $tr.find('.item-wise-price-input').val(rowObj.item_wise_price);

      // 7) Discount & Discount-Amt
      rowObj.disc = + (d.disc || 0);
      rowObj.to   = + (d.to   || 0);
      $tr.find('.disc-input').val(rowObj.disc);
      $tr.find('.to-input').val(rowObj.to);

      // fillRow ke last mein:
      // rowObj.p_per_pack = d.p_per_pack || d.pieces_per_pack || 1;
      // $tr.find('.p-pack-input').val(rowObj.p_per_pack);

      // fillRow ke last mein:
      rowObj.p_per_pack = d.p_per_pack || d.pieces_per_pack || 1;
      $tr.find('.p-pack-input').val(rowObj.p_per_pack);
      
      // Store loading & packets for auto calculations
      rowObj.loading = +(d.loading || 0);
      rowObj.packets = +(d.packets || 0);
      rowObj.minimum_rate_lock = +(d.minimum_rate_lock || 0);
      
      // Calculate and set weight if show_weight_or_meters enabled (only on initial load)
      if (settingsDict.show_weight_or_meters) {
        const packets = +(rowObj.packets || 0);
        if (packets > 0) {
          const q = +(d.qty || 0);
          const pc = +(d.pcs || 0);
          const ppp = +(d.p_per_pack || d.pieces_per_pack || rowObj.p_per_pack || 1) || 1;
          const weightVal = packets * (q + (pc / ppp));
          $tr.find('.weight-input').val(weightVal.toFixed(2));
          rowObj.weight = weightVal;
        }
      }


      // Store extra display fields
      rowObj._l_sale_price    = d.l_sale_price || d.price || 0;
      rowObj.whole_sale_price = d.whole_sale_price || 0;
      rowObj.cotton_size      = +(d.cotton_size || 0);
      rowObj.purchase_price   = +(d.purchase_price || 0);
      rowObj.company          = d.company || '';
      rowObj.prod_id          = d.prod_id || d.id || 0;   // ← actual prod_id
      rowObj.fbr_sale_type    = d.fbr_sale_type || '';
      rowObj.list_rate        = d.list_rate || 0;   // Point 4

      // Serial binding — jab fillRow ko serial_id/serial_no wala data mile
      // (edit-mode invoice reload). Fresh product-select ke data mein ye
      // fields nahi hote, is lea non-serial rows automatically unlock ho jate hain.
      if (d.serial_id) {
        rowObj.serial_id = d.serial_id;
        $tr.find('.serial-id-input').val(d.serial_id);
        if (d.serial_no) $tr.find('.vcode-input').val(d.serial_no);
        lockRowQtyForSerial($tr, true);
      } else {
        rowObj.serial_id = null;
        $tr.find('.serial-id-input').val('');
        lockRowQtyForSerial($tr, false);
      }

      if (settingsDict.pieces_wise_sale) {
        $tr.find('.pcs-input').trigger('change');
      } else {
        $tr.find('.qty-input').trigger('change');
      }

      updateInfoBar(rowObj);
      updateLastRatePill(null);   // reset last rate for new product

    }

  function recalcAll() {
    let sub = sale.products.reduce((s,p)=> s + (p.total||0), 0);
    let qty = sale.products.reduce((s,p)=> s + (p.qty||0), 0);
    let pcs = sale.products.reduce((s,p)=> s + (p.pcs||0), 0);
    let nav_qty = sale.products.reduce((s, p) => s + (p.qty > 0 ? (1 || 0) : 0), 0);

    sale.sub = +sub.toFixed(2);

    // ── WEIGHT CALCULATION (Always calculate) ──
    let totalWeight = 0;
    if (settingsDict.show_weight) {
      sale.products.forEach(p => {
        const itemQty = +(p.qty || 0);
        const packets = +(p.packets || 0);
        totalWeight += itemQty * packets;
      });
      // Update weight display in nav
      $('#nav_weight_count').text(totalWeight.toFixed(2));
      $('.fn-badge-weight').show();
    } else {
      $('.fn-badge-weight').hide();
    }

    // ── AUTO LOADING CALCULATION ──
    // if (settingsDict.auto_loading && _editLoadComplete) {
    //   let autoLoadingTotal = 0;
    //   sale.products.forEach(p => {
    //     const itemQty = +(p.qty || 0);
    //     const itemPcs = +(p.pcs || 0);
    //     const ppp = +(p.p_per_pack || 1) || 1;
    //     const loading = +(p.loading || 0);
        
    //     // Convert pcs to qty units and add to total qty
    //     const pcsAsQty = itemPcs / ppp;
    //     const totalUnits = itemQty + pcsAsQty;
        
    //     // Multiply by loading
    //     autoLoadingTotal += totalUnits * loading;
    //   });
    //   // Set to other_charges input
    //   $('#other_charges').val(autoLoadingTotal.toFixed(2));
    // }

    const d  = +$('#flat_discount').val()    || 0;
    const t  = +$('#transport_charges').val()|| 0;
    const o  = +$('#other_charges').val()    || 0;
    const tx = +$('#flat_sale_tax').val()    || 0;
    
    const total_received = +$('#total_received').val();
    const base   = sale.sub - d + t + o;
    const taxAmt = base * tx/100;
    sale.grand   = +(base + taxAmt).toFixed(2);

    $('#sub_total').val(sale.sub);
    // $('#grand_total').val(sale.grand + due_balance);
    $('#nav_qty_count').text(nav_qty.toFixed(0));//sale.products.length);
    $('#nav_units_count').text(qty.toFixed(0));//sale.products.length);
    
    updateRemaining();
    }

  function recalcDiscPer() {
    recalcAll();
    const sub_total = $('#sub_total').val()|| 0;
    const flat_dis_percent = $('#flat_discount_percent').val()    || 0;
    var flat_discout_amt = sub_total * 0.01 * flat_dis_percent;
    $('#flat_discount').val(flat_discout_amt.toFixed(0));
    recalcAll();
    enforceDiscountLimit();
    }


 function enforceDiscountLimit() {
   const subTotal = sale.sub || 0;
   const discAmt  = +$('#flat_discount').val() || 0;

   if (subTotal > 0 && discAmt > subTotal) {
     Swal.fire({
       icon: 'error',
       title: 'Too much discount, its not allowed.',
       text: 'Please recheck.',
       confirmButtonText: 'OK'
     });
     $('#flat_discount').val('');
     $('#flat_discount_percent').val('');
     recalcAll();
     return false;
   }
   return true;
 }

  function updateRemaining() {
    const { bankTotal, chequeTotal, total: totalReceived } = getTotalReceived();
    const due = parseFloat(String($('#due_balance').text() || '').replace(/,/g, '')) || 0;
    const bill_total = +(sale.grand).toFixed(0);
    var st = ($('#sale_type').val() || '').toLowerCase();

    // Bill Total field (right side) — always shows sale.grand
    $('#amount_change').val(bill_total ? bill_total.toFixed(0) : '0');

    // Hidden grand_total label (for backward compat)
    $('#grand_total').text(bill_total.toFixed(0));

    // Nav strip remaining (grand label in the blue bar)
    if (st === 'cash_return' || st === 'credit_return') {
      const remaining = +(due - (sale.grand - totalReceived)).toFixed(0);
      $('label[name="grand_total"]').text(remaining.toFixed(0));
    } else {
      const remaining = +(sale.grand + due - totalReceived).toFixed(0);
      $('label[name="grand_total"]').text(remaining.toFixed(0));
    }

    updatePaymentSummary();
    }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  12 — SAVE / PRINT / PAYLOAD                                 ║
  // ║  Collect data and submit                                     ║
  // ╚══════════════════════════════════════════════════════════════╝

  function collectSalePayload(){
    recalcAll();

      const items = [];
      var qty_posted = 0;
      
      $('#table_products tbody tr').not('.template-row').each(function(){
          const $r = $(this);
          const row = $r.data('rowObj') || {};
          if (!row || (!row.id && !row.code)) return;
          
          const uid = rowEnsureUID($r);
          qty_posted = qty_posted + row.qty + row.pcs + row.bonus;
          
          items.push({
              id: row.id, 
              code: row.code, 
              name: row.name || '',
              qty: +row.qty || 0,
              pcs: +row.pcs || 0,
              bonus: +row.bonus || 0,
              bags_qty: +row.bags || 0,
              price: +row.price || 0,
              gst: +row.gst || 0,
              f_tax: +row.f_tax || 0,
              disc: +row.disc || 0,
              to: +row.to || 0,
              p_per_pack: +row.p_per_pack || 1,
              item_wise_price: +row.item_wise_price || 0,
              total: parseFloat(($r.find('.total-display').text() || '0').replace(/,/g, '')) || row.total || 0,
              variant_id: $r.find('.variant-id-input').val() || row.variant_id || null,
              serial_id: $r.find('.serial-id-input').val() || null,
              line_uid: uid,
              spec_a: $r.find('.spec-a-select').val() || '',
              spec_b: $r.find('.spec-b-select').val() || ''
          });
      });

      const saletype = $('#sale_type').val();
      const isVendor = (saletype === 'vendor_sale' || saletype === 'vendor_return');
      
      var contractId = ($('#contract_id').val() || '').toString().trim();
      contractId = parseInt(contractId.replace(/[^\d]/g, ''), 10) || 0;

      return {
          qty_posted: qty_posted,
          saletype: saletype,
          hold: parseInt($('#hold_flag').val() || '0', 10) || 0,
          contract_id: contractId,
          saledate: $('#sale_date').val(),
          area: $('#sale_area').val(),
          // Use vendor or customer based on sale type
          customer: isVendor ? $('#searchbox_vendors').val() : $('#searchbox_customers').val(),
          customer_text: $('#searchbox_customers').select2('data')[0]?.text || '',   // ← NEW: for draft restore only
          vendor_text:   $('#searchbox_vendors').select2('data')[0]?.text || '',     // ← NEW: for draft restore only
          order_booker: $('#order_booker').val(),
          veh_hidden_id: $('#veh_hidden_id').val(),
          veh_hidden_reading: $('#veh_hidden_reading').val(),
          cash_customer_phone: $('#cash_customer_phone').val(),
          cash_customer_name: $('#cash_customer_name').val(),
          cash_customer_address: $('#cash_customer_address').val(),
          cash_customer_voucher_no: $('#cash_customer_voucher_no').val() || '',
          products: items,

          sub_total: sale.sub,
          flat_discount: +$('#flat_discount').val() || 0,
          transport_charges: +$('#transport_charges').val() || 0,
          other_charges: +$('#other_charges').val() || 0,
          flat_sale_tax: +$('#flat_sale_tax').val() || 0,
          grand_total: sale.grand,

          payment_remarks: ($('#payment_remarks').val() || '').toString(),
          
          bank_payments: collectBankPayments(),
          cheques: collectCheques(),
          total_received_all: getTotalReceived().total,
          // Backward compat fields (derived from multi-bank):
          payment_method: (collectBankPayments().length > 0 ? 'bank' : 'cash'),
          total_received_by_cash: getTotalReceived().bankTotal,
          total_received_by_bank: 0,
          selected_bank: (collectBankPayments().length > 0 ? collectBankPayments()[0].bank_id : 0),
      };
    }

  function doSave(){
    if (isInvoiceSubmitting == false){
      recalcAll();
      const payload = collectSalePayload();
      $('#hold_flag').val('0');
      const credit_mode = isCreditMode();
      // 1) Order Booker Check
      const orderbooker_must = String(settingsDict.order_taker_must_for_invoice).toLowerCase() === 'true';
      var ob = $('#order_booker').val();
      var cust = $('#searchbox_customers').val();

      if (orderbooker_must && (!ob || ob.length < 1)) {
          Swal.fire({
              icon: 'error',
              title: 'Save Failed',
              text: 'Order Booker is required!',
              confirmButtonText: 'OK'
          });
          $('#order_booker').focus();
          return;
      }
      if (credit_mode && (!cust || cust.length < 1)) {
          Swal.fire({
              icon: 'error',
              title: 'Save Failed',
              text: 'Customer Name is required for Credit Sale / Return!',
              confirmButtonText: 'OK'
          });
          $('#searchbox_customers').focus();
          return;
      }

      // 2) Items Check
      if (Math.abs(payload.sub_total) < 1) {
          Swal.fire({
              icon: 'error',
              title: 'Save Failed',
              text: 'No Item found to Save!',
              confirmButtonText: 'OK'
          });
          return;
      }

            else{
        const saletype_val = $('#sale_type').val() || '';
        const is_estimate  = saletype_val === 'estimate';

        if (FBR_ENABLED && !is_estimate) {
          Swal.fire({
            title: 'FBR Digital Invoice',
            html:  'Do you want to post this invoice to <b>FBR</b> via DI?',
            icon:  'question',
            showCancelButton:   true,
            showDenyButton:     true,
            confirmButtonText:  '📤 Save & Post to FBR',
            denyButtonText:     '💾 Save Only, Post Later',
            cancelButtonText:   'Cancel',
            confirmButtonColor: '#198754',
            denyButtonColor:    '#6c757d',
          }).then((result) => {
            if (result.isConfirmed || result.isDenied) {
              isInvoiceSubmitting = true;
              clearDraft();
              $('input[name="sale_items"]').val(JSON.stringify(payload));
              $('input[name="payment_remarks"]').val(payload.payment_remarks || '');
              $('input[name="post_to_fbr"]').val(result.isConfirmed ? '1' : '0');
              $('.saleForm').submit();
            }
            // Cancel → kuch mat karo
          });
        } else {
          isInvoiceSubmitting = true;
          clearDraft();
          $('input[name="sale_items"]').val(JSON.stringify(payload));
          $('input[name="payment_remarks"]').val(payload.payment_remarks || '');
          $('input[name="post_to_fbr"]').val('0');
          $('.saleForm').submit();
        }
      }
    }
    }

  function doAutoPrint(){
    if (isInvoiceSubmitting == false){

      recalcAll();
      const templateId = settingsDict.simple_bill || 't1';  // $(this).data('template-id');
      const url = $('.saleForm').attr('action'); // same endpoint as normal save

      const payload = collectSalePayload();
      const credit_mode = isCreditMode();
      var cust = $('#searchbox_customers').val();
      // if (payload.qty_posted < 1){
      //   Swal.fire('Save failed', "No Item found to Save!", 'error');
      // }

      if (Math.abs(payload.qty_posted) < 1){
        Swal.fire('Save failed', "No Item found to Save!", 'error');
      }

      else if (credit_mode && (!cust || cust.length < 1)) {
          Swal.fire({
              icon: 'error',
              title: 'Save Failed',
              text: 'Customer Name is required for Credit Sale / Return!',
              confirmButtonText: 'OK'
          });
          $('#searchbox_customers').focus();
      }

    else{
      const saletype_val2 = $('#sale_type').val() || '';
      const is_estimate2  = saletype_val2 === 'estimate';

      const _doPrint = (postToFbr) => {
        isInvoiceSubmitting = true;
        const $btn = $('#save-main-btn');
        const oldTxt = $btn.text();
        $btn.prop('disabled', true).text('Saving…');

        $.ajax({
          url: url,
          type: 'POST',
          data: {
            csrfmiddlewaretoken: csrftoken,
            sale_items: JSON.stringify(payload),
            payment_remarks: payload.payment_remarks || '',
            post_to_fbr: postToFbr ? '1' : '0',
            as_json: '1'
          },
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
          success: function(res) {
          // REWRITE with A3 special-case
          if (res && res.ok) {
            clearDraft();
            const invNo  = res.invoice_no;
            const tpl    = String(templateId).toLowerCase();
            const encInv = encodeURIComponent(invNo);
            const saleType = (document.getElementById("sale_type")?.value || "").toLowerCase();

            // decide suffix by sale_type
            let suffix = "";
            if (saleType === "cash" || saleType === "credit" || saleType === "vendor_sale") {
              const viewUrl = `/invoices/invoice-templates/${templateId}/${encInv}/sale/`;
              window.open(viewUrl, "_blank");
              setTimeout(() => {
                window.location.href = "{% url 'sales:sales_add' %}";
              }, 200);
              return;


            } else if (saleType === "cash_return" || saleType === "credit_return" || saleType === "vendor_return") {
              const viewUrl = `/invoices/invoice-templates/${templateId}/${encInv}/return/`;
              window.open(viewUrl, "_blank");
              setTimeout(() => {
                window.location.href = "{% url 'sales:sales_add' %}";
              }, 200);
              return;


            } else if (saleType === "estimate") {
              const viewUrl = `/invoices/invoice-templates/${templateId}/${encInv}/quotation/`;
              window.open(viewUrl, "_blank");
              setTimeout(() => {
                window.location.href = "{% url 'sales:sales_add' %}";
              }, 200);
              return;
            }
            return;
          }
            else {
              Swal.fire('Save failed', (res && res.error) ? String(res.error) : '', 'error');
              isInvoiceSubmitting = false;
            }
          },

          error: function(xhr) {
            var w = window.open('', '_blank');
            w.document.open(); w.document.write(xhr.responseText); w.document.close();
            isInvoiceSubmitting = false;
          },
          complete: function() {
            $btn.prop('disabled', false).text(oldTxt);
            // $('#save-dropup-menu').removeClass('show');
          }
        });
      }; // end _doPrint

        if (FBR_ENABLED && !is_estimate2) {
          Swal.fire({
            title: 'FBR Digital Invoice',
            html:  'Do you want to post this invoice to <b>FBR</b> via DI?',
            icon:  'question',
            showCancelButton:   true,
            showDenyButton:     true,
            confirmButtonText:  '📤 Save & Post to FBR',
            denyButtonText:     '💾 Save Only, Post Later',
            cancelButtonText:   'Cancel',
            confirmButtonColor: '#198754',
            denyButtonColor:    '#6c757d',
          }).then((result) => {
            if (result.isConfirmed || result.isDenied) {
              _doPrint(result.isConfirmed);
            }
          });
        } else {
          _doPrint(false);
        }
      }


    }
    }




  // ─────────────────────────────────────────────
  // WhatsApp Send Function
  // ─────────────────────────────────────────────
  const WA_SIGNATURE = `

  ━━━━━━━━━━━━━━━
  _Automated Message from Blue Primes Software (blueprimes.com)_`;

  function doWhatsApp() {
    if (isInvoiceSubmitting) return;

    recalcAll();
    const payload = collectSalePayload();
    const credit_mode = isCreditMode();
    const saletype = $('#sale_type').val();
    
    // Get customer info
    let customerName = '';
    let customerPhone = '';
    let customerBalance = 0;
    
    if (saletype === 'cash' || saletype === 'cash_return') {
      customerName = $('#cash_customer_name').val() || 'Cash Customer';
      customerPhone = $('#cash_customer_phone').val() || '';
    } else {
      // Credit sale / vendor - get from selected customer/vendor
      const isVendor = (saletype === 'vendor_sale' || saletype === 'vendor_return');
      const $select = isVendor ? $('#searchbox_vendors') : $('#searchbox_customers');
      const selectData = $select.select2('data');
      if (selectData && selectData.length > 0) {
        customerName = selectData[0].text || selectData[0].name || 'Customer';
        customerPhone = selectData[0].mobile || selectData[0].phone || '';
        customerBalance = selectData[0].balance || 0;
      }
    }
    
    // Validation: Phone number required for WhatsApp
    if (!customerPhone || customerPhone.trim() === '') {
      Swal.fire({
        icon: 'warning',
        title: 'Phone Number Required',
        text: 'WhatsApp message cannot be sent without a phone number. Please provide customer phone number.',
        confirmButtonText: 'OK'
      });
      
      if (saletype === 'cash' || saletype === 'cash_return') {
        $('#cash_customer_phone').focus();
      }
      return;
    }
    
    // Validation: Items check
    if (payload.qty_posted < 1) {
      Swal.fire('Save failed', "No Item found to Save!", 'error');
      return;
    }
    
    // Validation: Customer required for credit mode
    if (credit_mode && (!$('#searchbox_customers').val() || $('#searchbox_customers').val().length < 1)) {
      Swal.fire({
        icon: 'error',
        title: 'Save Failed',
        text: 'Customer Name is required for Credit Sale / Return!',
        confirmButtonText: 'OK'
      });
      $('#searchbox_customers').focus();
      return;
    }
    
    // All validations passed - proceed with save + WhatsApp
    isInvoiceSubmitting = true;
    const $btn = $('#whatsapp-main-btn');
    const oldTxt = $btn.html();
    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Saving…');
    
    const url = $('.saleForm').attr('action');
    
    $.ajax({
      url: url,
      type: 'POST',
      data: {
        csrfmiddlewaretoken: csrftoken,
        sale_items: JSON.stringify(payload),
        payment_remarks: payload.payment_remarks || '',
        post_to_fbr: '0',
        as_json: '1'
      },
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      success: async function(res) {
        if (res && res.ok) {
          clearDraft();
          const saleType = $('#sale_type').val() || '';
          const isReturn = (saleType === 'cash_return' || saleType === 'credit_return');
          const invoiceNo = isReturn ? `${res.invoice_no} (Return)` : res.invoice_no;
          const grandTotal = payload.grand_total || 0;
          const saleDate = payload.saledate || new Date().toLocaleDateString('en-GB');
          
          // Format phone number
          let phone = String(customerPhone).trim().replace(/[\s\-\+]/g, '');
          if (phone.startsWith('0')) {
            phone = '92' + phone.substring(1);
          }
          
          let msg = '';
          
          // Check sale type for message template
          if (saletype === 'cash' || saletype === 'cash_return') {
            // Simple thank you message for cash customers
            msg = `Dear *${customerName}*,

    Thank you for shopping with us; we truly value your trust and support. 🙏

    📝 Invoice# *${invoiceNo}*
    💰 Amount: *Rs. ${Number(grandTotal).toLocaleString()}*
    📅 Date: ${saleDate}`;
            
          } else {
            // Credit/Vendor sales - use database template
            let templateText = '';
            try {
              const templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'sales' %}", {
                method: 'GET',
                credentials: 'same-origin',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
              });
              const templateData = await templateResp.json();
              
              if (templateData.ok && templateData.template_text) {
                templateText = templateData.template_text;
              } else {
                templateText = getFallbackSalesTemplate();
              }
            } catch (err) {
              console.warn('Template fetch failed, using fallback:', err);
              templateText = getFallbackSalesTemplate();
            }
            
            // Replace placeholders
            msg = templateText
              .split('{customer_name}').join(customerName)
              .split('{invoice_no}').join(invoiceNo)
              .split('{date}').join(saleDate)
              .split('{amount}').join(Number(grandTotal).toLocaleString())
              .split('{balance}').join(Number(customerBalance).toLocaleString())
              .split('{remaining}').join(Number(customerBalance + grandTotal).toLocaleString())
              .split('{mobile}').join(customerPhone)
              .split('{address}').join('')
              .split('{remarks}').join('');
          }
          
          // Add signature
          msg += WA_SIGNATURE;
          
          // Send via WhatsApp API
          try {
            const waFD = new FormData();
            waFD.append('phone', phone);
            waFD.append('message', msg);
            
            const waResp = await fetch('http://localhost:3000/api/send-media', {
              method: 'POST',
              body: waFD
            });
            const waData = await waResp.json();
            
            if (waData.success) {
              Swal.fire({
                icon: 'success',
                title: 'Invoice Saved & WhatsApp Sent!',
                text: `Invoice #${invoiceNo} saved and message sent to ${customerName}`,
                timer: 2000,
                showConfirmButton: false
              });
            } else {
              Swal.fire({
                icon: 'warning',
                title: 'Saved but WhatsApp Failed',
                text: 'Invoice saved but WhatsApp message failed: ' + (waData.error || 'Unknown error'),
                confirmButtonText: 'OK'
              });
            }
          } catch (waErr) {
            console.error('WhatsApp error:', waErr);
            Swal.fire({
              icon: 'warning',
              title: 'Saved but WhatsApp Failed',
              text: 'Invoice saved but WhatsApp server not reachable. Is it running?',
              confirmButtonText: 'OK'
            });
          }
          
          // Redirect to fresh page
          setTimeout(() => {
            window.location.href = "{% url 'sales:sales_add' %}";
          }, 2000);
          
        } else {
          Swal.fire('Save failed', (res && res.error) ? String(res.error) : '', 'error');
          isInvoiceSubmitting = false;
        }
      },
      error: function(xhr) {
        var w = window.open('', '_blank');
        w.document.open(); w.document.write(xhr.responseText); w.document.close();
        isInvoiceSubmitting = false;
      },
      complete: function() {
        $btn.prop('disabled', false).html(oldTxt);
      }
    });
  }

  function getFallbackSalesTemplate() {
    return `*{customer_name}*

    📝 Invoice# {invoice_no}
    💰 Amount: Rs. {amount}
    📅 Date: {date}

    Thank you for your business! 🙏`;
    }



  // ╔══════════════════════════════════════════════════════════════╗
  // ║  13 — CASH CUSTOMER / PHONE LOOKUP                           ║
  // ║  Phone search, last invoices modal                           ║
  // ╚══════════════════════════════════════════════════════════════╝

  function cfiRenderRows(rows){
    const $tb = $('#cfi_table tbody');
    $tb.empty();
    rows.forEach(r => {
      const slug = r.txn_slug || 'sale';
      const isEst = (slug === 'quotation');
      const actionBtn = isEst
        ? `<button class="btn btn-xs btn-success cfi-convert-btn py-0 px-1" style="font-size:.72rem;"
                   data-inv="${r.invoice_no}" title="Convert to Sale">
             <i class="fas fa-exchange-alt mr-1"></i>To Sale
           </button>`
        : `<button class="btn btn-xs btn-info cfi-print-btn py-0 px-1" style="font-size:.72rem;"
                   data-inv="${r.invoice_no}" data-slug="${slug}" title="Print Invoice">
             <i class="fas fa-print mr-1"></i>Print
           </button>`;
      const tr = `
        <tr data-inv="${r.invoice_no}" data-slug="${slug}" style="cursor:pointer;">
          <td>${r.invoice_no}</td>
          <td>${(r.transaction_type_str||'').toUpperCase()}</td>
          <td>${r.customer_name||''}</td>
          <td>${r.customer_phone||''}</td>
          <td>${r.customer_address||''}</td>
          <td>${r.voucher_no||''}</td>
          <td>${r.invoice_date||''}</td>
          <td class="text-center">${actionBtn}</td>
        </tr>`;
      $tb.append(tr);
    });
    }

  function cfiOpenModal(rows, total, limitWasAll){
    cfiRenderRows(rows);
    $('#cfiHint').text(limitWasAll ? `Showing all (${total})` : `Showing latest ${rows.length}${total>rows.length?` of ${total}`:''}`);
    $('#cfiModal').modal('show');
    }

  $(function(){$('#cash_customer_phone').on('input', function(){
      const cur = this.value; const d = digitsOnly(cur);
      if (cur !== d) this.value = d;
    });

    // Prefill from initialSale (edit)
    if (initialSale){
      if (initialSale.cash_customer_phone)   $('#cash_customer_phone').val(initialSale.cash_customer_phone);
      if (initialSale.cash_customer_name)    $('#cash_customer_name').val(initialSale.cash_customer_name);
      if (initialSale.cash_customer_address) $('#cash_customer_address').val(initialSale.cash_customer_address);
      if (initialSale.cash_customer_voucher_no) $('#cash_customer_voucher_no').val(initialSale.cash_customer_voucher_no);
    }

    // Enter on phone → lookup or jump to product entry
    $('#cash_customer_phone').on('keydown', function(e){
      const isF9 = (e.key === 'F9') || e.which === 120 || e.keyCode === 120;
      const isEnter = (e.key === 'Enter') || e.which === 13 || e.keyCode === 13;
      if (!isEnter && !isF9) return;
      if (isF9) {
        e.preventDefault(); 
        const phone = digitsOnly($(this).val());
        $.get('{% url "sales:ajax_cash_customer_lookup" %}', { phone: phone, limit: 10 })
          .done(resp => {
            if (!resp || !resp.ok || !resp.total){ ensureNextRowFocusOrCreate(); return; }
            // Prefill from last
            const last = resp.last || {};
            $('#cash_customer_name').val(last.customer_name||'');
            $('#cash_customer_address').val(last.customer_address||'');
            $('#cash_customer_voucher_no').val(last.voucher_no||'');
            cfiOpenModal(resp.rows||[], resp.total||0, false);
          })
          .fail(() => { ensureNextRowFocusOrCreate(); });
      }
      if (isEnter) {
        e.preventDefault();

        const phone = digitsOnly($(this).val());
        if (!phone){ ensureNextRowFocusOrCreate(); return; }
        else{
          $('#cash_customer_name').focus().select(); 
        }
      }
    });

    // Show All
    $('#cfiShowAll').on('click', function(){
      const phone = digitsOnly($('#cash_customer_phone').val());
      if (!phone) return;
      $.get('{% url "sales:ajax_cash_customer_lookup" %}', { phone: phone, limit: 'all' })
        .done(resp => { cfiOpenModal(resp.rows||[], resp.total||0, true); });
    });

    // Row click → open invoice view in new tab (button click se alag)
    $('#cfi_table').on('click', 'tbody tr', function(e){
      if ($(e.target).closest('button').length) return;  // button click → row handler skip
      const inv = $(this).data('inv');
      const slug = $(this).data('slug') || 'sale';
      window.open(INVOICE_URL_BASE + inv + '/' + slug, '_blank');
    });

    // Print button → invoice print new tab
    $('#cfi_table').on('click', '.cfi-print-btn', function(e){
      e.stopPropagation();
      const inv  = $(this).data('inv');
      const slug = $(this).data('slug') || 'sale';
      window.open(INVOICE_URL_BASE + inv + '/' + slug + '?autoprint=1', '_blank');
    });

    // Convert to Sale button → estimate_convert_to_sale URL new tab
    $('#cfi_table').on('click', '.cfi-convert-btn', function(e){
      e.stopPropagation();
      const inv = $(this).data('inv');
      const url = "{% url 'sales:estimate_convert_to_sale' 0 %}".replace('/0/', '/' + inv + '/');
      window.open(url, '_blank');
    });
    });

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  14 — VEHICLE / OIL                                          ║
  // ║  Vehicle modal, readings, history                            ║
  // ╚══════════════════════════════════════════════════════════════╝
  {% include "sales/styles_and_script/sales_oil.html" %}

  // ╔══════════════════════════════════════════════════════════════╗
  // ║   16 — CUSTOMER & ORDER BOOKER SELECT2                       ║
  // ║  Customer search, order booker search, customer select       ║
  // ╚══════════════════════════════════════════════════════════════╝

  function spCustTemplateResult(item){
    const rawName = (item.name || item.text || '');
    const nameTxt = spTitleCase(rawName);     // <= yahan Title Case
    const name    = spEsc(nameTxt);

    const stock   = (item.balance != null ? item.balance : '');
    const address = spEsc(item.address || '');

    return `
      <div class="sp-opt" style="display:block; width:100%;">
        <div style="display:flex; justify-content:space-between; align-items:center; width:100%;">
          <div class="sp-name">${name}</div>
          <div class="sp-meta">
            <span class="sp-stock">Balance: ${spMoney(stock)}</span>
          </div>
        </div>
        ${address ? `<div class="sp-address" style="display:block; width:100%; font-size:11px; color:#c8d4e8; line-height:1.3; margin-top:2px;">${address}</div>` : ''}
      </div>
    `;
    }
 
  $('#searchbox_customers').select2({
    theme:'bootstrap4',
    width:'100%',
    placeholder:'Search customer…',
    minimumInputLength:1,
    dropdownAutoWidth: true,
    dropdownCssClass: 'sp-dd-wide', 
    ajax:{
      url: '{% url "customers:get_customers" %}',
      type:'POST',
      delay:250,
      headers:{ 'X-CSRFToken': csrftoken },
      data: p => ({
          term:p.term,
          area_id: window.selectedAreaId || ''
          }),
      processResults: d => ({ results:d })
    },
    templateResult: spCustTemplateResult,
    language: {
      noResults: function() {
        return (
          '<div class="text-center p-2">' +
            '<div class="small text-muted mb-1">No customer found</div>' +
            
          '</div>'
        );
      }
    },
    escapeMarkup: function(m) { return m; }
    })
    // focus its search field when it opens
    .on('select2:open', () => {
      setTimeout(() => {
        const fld = document.querySelector(
          '.select2-container--open .select2-search__field'
        );
        fld && fld.focus();
      }, 0);
    })
    .on('select2:select', e => {
          const d = e.params.data;
          $('#due_balance').text((d.balance).toFixed(2));
          $('#cash_customer_phone').val((d.phone));
          $('#cash_customer_name').val((d.text));
          $('#cash_customer_address').val((d.address));
          $('#flat_sale_tax').val(d.default_tax);

          window._selectedCustomerStrNo = (d.str_no || '').trim();
          
          // ── Set rate_type based on customer type_c (only for credit/credit_return) ──
          const saleType = $('#sale_type').val();
          if ((saleType === 'credit' || saleType === 'credit_return') && d.type_c) {
            const typeMap = {
              'Local Sale': 'local_sale',
              'Whole Sale': 'wholesale',
              'Supplier': 'supplier',
              'Branches': 'branches'
            };
            const mappedType = typeMap[d.type_c];
            if (mappedType) {
              $('#rate_type').val(mappedType).trigger('change');
            }
          }
          
          // Scroll items table to bottom first
          const tableContainer = document.querySelector('.table-responsive');
          if (tableContainer) {
            tableContainer.scrollTop = tableContainer.scrollHeight;
          }
          
          // Then focus on row
          setTimeout(() => {
            const $rows = $('#table_products tbody tr').not('.template-row');
            if ($rows.length) {
              focusFirstFieldForRow($rows.last());
            } else {
              const $new = addRow();
              focusFirstFieldForRow($new);
            }
          }, 100);
          
          updateRemaining();
        })
        .on('select2:clear select2:unselect', function () {
              window._selectedCustomerStrNo = '';   // customer hata diya → reset
        });





  $('#order_booker').select2({
    theme:'bootstrap4', width:'100%',
    placeholder:'Order Taker', minimumInputLength:1,
    ajax:{
      url: "{% url 'customers:get_order_bookers' %}",
      type:'POST', delay:250,
      headers:{'X-CSRFToken':csrftoken},
      data:p=>({term:p.term}),
      processResults:d=>({results:d})
    }
    }).on('select2:select', () => {
    // focus first or last code-input
    const $rows = $('#table_products tbody tr').not('.template-row');
    if ($rows.length) {
      focusFirstFieldForRow($rows.last());
    } else {
      const $new = addRow();
      focusFirstFieldForRow($new);
    }
    }).on('select2:open', () => {
      setTimeout(() => {
        const fld = document.querySelector(
          '.select2-container--open .select2-search__field'
        );
        fld && fld.focus();
      }, 0);
    });

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  17 — KEYBOARD SHORTCUTS                                     ║
  // ║  Global keyboard bindings                                    ║
  // ╚══════════════════════════════════════════════════════════════╝

  $('#flat_discount,#transport_charges,#other_charges,#flat_sale_tax').on('keyup change', recalcAll);
  $('#flat_discount_percent').on('keyup change', recalcDiscPer);
  $('#flat_discount').on('keyup change', enforceDiscountLimit);

  // Quick Pay open ho to Discount se ArrowDown → wapas Received Amount par.
  // Modal band ho to ye handler kuch nahi karta (native number decrement chalti rehti hai).
  $('#flat_discount').on('keydown', function (e) {
      if (e.key === 'ArrowDown' && _qpOpen) {
          e.preventDefault();
          $('#qpReceived').focus().select();
      }
  });

  $('#save-main-btn').on('click', function(e){ e.preventDefault(); doSave(); });
  $('#print-main-btn').on('click', function(e){ e.preventDefault(); doAutoPrint(); });
  $('#whatsapp-main-btn').on('click', function(e){ e.preventDefault(); doWhatsApp(); });
  $(document).off('keydown.saveShortcuts').on('keydown.saveShortcuts', function(e){
    if(e.ctrlKey && e.which===83){ e.preventDefault(); doSave(); }
    if(e.ctrlKey && e.which===80){ e.preventDefault(); doAutoPrint(); }
    });

  $(document).on('keydown.f2Toggle', function(e) {
      if (e.key !== 'F2') return;
      if ($('.modal.show').length) return;
      e.preventDefault();
 
      var _buyEl = document.getElementById('pibBuy');
      var _avgEl = document.getElementById('pibAvg');
      if (!_buyEl) return;
 
      var _nowHidden = (_buyEl.style.display === 'none');
      if (_buyEl) _buyEl.style.display = _nowHidden ? '' : 'none';
      if (_avgEl) {
          // Avg sirf tab show karo jab actual value ho
          if (_nowHidden && _avgEl.querySelector('b').textContent !== '—') {
              _avgEl.style.display = '';
          } else {
              _avgEl.style.display = 'none';
          }
      }
  });

// Feature 5: Expiry chip update helper
  function _updateExpiryChip(rowObj) {
    var $chip = $('#pibExpiry');
    if (!$chip.length || !rowObj || !rowObj.id) {
      if($chip.length) $chip.hide();
      return;
    }
    $chip.removeClass('short expired').hide();
    $.get("{% url 'sales:ajax_fifo_layers' %}", { prod_id: rowObj.id, include_expiry: 1 }, function(res) {
      if (!res.ok || !res.layers || !res.layers.length) {
        $chip.hide(); return;
      }
      var expVal = res.layers[0].descp_2 || '';
      if (!expVal) {
        $chip.hide(); return;
      }
      $('#pibExpiryVal').text(expVal);
      $chip.removeClass('short expired');
      var today = new Date(); today.setHours(0,0,0,0);
      var sixM  = new Date(today); sixM.setMonth(sixM.getMonth() + 6);
      var ed = new Date(expVal);
      if (isNaN(ed)) {
        var pts = expVal.split(/[\/\-\.]/);
        if (pts.length === 3)
          ed = pts[0].length===4 ? new Date(pts[0],pts[1]-1,pts[2]) : new Date(pts[2],pts[1]-1,pts[0]);
      }
      if (!isNaN(ed)) {
        if (ed <= today) { $chip.addClass('expired'); console.log('[EXP] status: EXPIRED'); }
        else if (ed <= sixM) { $chip.addClass('short'); console.log('[EXP] status: SHORT (within 6 months)'); }
        else { console.log('[EXP] status: OK (far future)'); }
      }
      $chip.show();
    }).fail(function(xhr){
      $chip.hide();
    });
  }

  // Feature 4: pibBuy click → FIFO layers modal
  $(document).on('click', '#pibBuy', function() {
    if (!_pibRowObj || !_pibRowObj.id) return;
    $('#fifoLayersLoading').show();
    $('#fifoLayersTable').hide();
    $('#fifoLayersFoot').hide();
    $('#fifoLayersTbody').empty();
    $('#fifoLayersModal').modal('show');
    $.get("{% url 'sales:ajax_fifo_layers' %}", { prod_id: _pibRowObj.id }, function(res) {
      $('#fifoLayersLoading').hide();
      if (!res.ok || !res.layers || !res.layers.length) {
        $('#fifoLayersTbody').html('<tr><td colspan="3" class="text-muted text-center py-3">No stock layers</td></tr>');
        $('#fifoLayersTable').show(); return;
      }
      var tot = 0;
      $('#fifoLayersTbody').html(res.layers.map(function(l,i){
        tot += l.qty;
        return '<tr><td class="text-center">'+(i+1)+'</td>'
              +'<td class="text-right">'+l.qty+'</td>'
              +'<td class="text-right">'+fmt2(l.purchase)+'</td></tr>';
      }).join(''));
      $('#fifoTotalQty').text(Math.round(tot*1000)/1000);
      $('#fifoLayersFoot').show();
      $('#fifoLayersTable').show();
    }).fail(function(){
      $('#fifoLayersLoading').hide();
      $('#fifoLayersTbody').html('<tr><td colspan="3" class="text-danger text-center">Error</td></tr>');
      $('#fifoLayersTable').show();
    });
  });

  {% if pos_type == "pharmacy" %}
  // Feature 5: pibExpiry click → all batches with expiry
  $(document).on('click', '#pibExpiry', function() {
    if (!_pibRowObj || !_pibRowObj.id) return;
    $('#expiryBatchLoading').show();
    $('#expiryBatchTable').hide();
    $('#expiryBatchTbody').empty();
    $('#expiryBatchModal').modal('show');
    $.get("{% url 'sales:ajax_fifo_layers' %}", { prod_id: _pibRowObj.id, include_expiry: 1 }, function(res) {
      $('#expiryBatchLoading').hide();
      if (!res.ok || !res.layers || !res.layers.length) {
        $('#expiryBatchTbody').html('<tr><td colspan="5" class="text-muted text-center py-3">No batches</td></tr>');
        $('#expiryBatchTable').show(); return;
      }
      var today = new Date(); today.setHours(0,0,0,0);
      var sixM  = new Date(today); sixM.setMonth(sixM.getMonth()+6);
      $('#expiryBatchTbody').html(res.layers.map(function(l,i){
        var st=''; var ed=null;
        if (l.descp_2) {
          ed = new Date(l.descp_2);
          if (isNaN(ed)) { var pts=l.descp_2.split(/[\/\-\.]/);
            if(pts.length===3) ed=pts[0].length===4?new Date(pts[0],pts[1]-1,pts[2]):new Date(pts[2],pts[1]-1,pts[0]); }
        }
        if (ed&&!isNaN(ed)) {
          if (ed<=today) st='background:#fef2f2;color:#dc2626;font-weight:600;';
          else if (ed<=sixM) st='background:#fff7ed;color:#92400e;';
        }
        return '<tr style="'+st+'"><td class="text-center">'+(i+1)+'</td>'
              +'<td class="text-right">'+l.qty+'</td>'
              +'<td class="text-right">'+fmt2(l.purchase)+'</td>'
              +'<td>'+spEsc(l.descp_1||'—')+'</td>'
              +'<td>'+spEsc(l.descp_2||'—')+'</td></tr>';
      }).join(''));
      $('#expiryBatchTable').show();
    }).fail(function(){
      $('#expiryBatchLoading').hide();
      $('#expiryBatchTbody').html('<tr><td colspan="5" class="text-danger text-center">Error</td></tr>');
      $('#expiryBatchTable').show();
    });
  });
  {% endif %}


  $(document).on('keydown.f3History', function(e) {
      if (e.key !== 'F3') return;
      if ($('.modal.show').length) return;
      e.preventDefault();
 
      var $row = $(document.activeElement)
                     .closest('#table_products tbody tr')
                     .not('.template-row');
      var ro = $row.length ? $row.data('rowObj') : _pibRowObj;
 
      if (!ro || !ro.code) {
          Swal.fire({
              icon:'info', title:'Product select karein',
              text:'Pehle kisi product row par focus karein, phir F3 press karein.',
              timer:1600, showConfirmButton:false
          });
          return;
      }
      // openSaleHistory → same function jo "Last" chip click par chalti hai
      openSaleHistory(ro);
  });

  $(document).on('keydown.escTableFocus', function(e) {
      if (e.key !== 'Escape') return;
      if ($('.modal.show').length)           return;  // modal open → close hone do
      if ($('.select2-container--open').length) return;  // select2 open → close hone do
 
      e.preventDefault();
      e.stopImmediatePropagation();
 
      var $rows = $('#table_products tbody tr').not('.template-row');
      if (!$rows.length) return;
      focusFirstFieldForRow($rows.last());
  });

  $(document).on('click', '#save-hold-btn', function () {
      $('#hold_flag').val('1');
      doSave();
  });

  // Help button → shortcuts modal
  $(document).on('click', '#helpShortcutBtn', function() {
    $('#shortcutsHelpModal').modal('show');
  });

  // ── alert_low_rate: price < purchase cost → cell highlight ──
  if (String(settingsDict.alert_low_rate).toLowerCase() === 'true') {
    $(document).on('input change keyup', '#table_products tbody .price-input', function() {
      const $row   = $(this).closest('tr');
      const rowObj = $row.data('rowObj');
      if (!rowObj) return;
      const entered = parseFloat($(this).val()) || 0;
      const buyP    = parseFloat(rowObj.purchase_price) || 0;
      if (buyP > 0 && entered > 0 && entered < buyP) {
        this.setAttribute('style',
          'border:2px solid #dc2626 !important;background-color:#fff1f2 !important;color:#991b1b !important;');
      } else {
        this.setAttribute('style', '');
      }
    });
  }

  // Point 5: Help shortcuts dialog
  $('#helpShortcutBtn').on('click', function() {
      $('#shortcutsHelpModal').modal('show');
  });

  // ── TEMPLATE_CONFIG (same as sales.html) ──────────────────
  const AP_TEMPLATE_CONFIG = [
    {
      key:'a4', name:'A4 — Full Page', color:'#2d5f8a',
      templates:[
        {id:'a1',label:'Type 1',sub:'Standard'},{id:'a2',label:'Type 2',sub:'Dist'},
        {id:'a3',label:'Type 3'},{id:'a4',label:'Type 4'},{id:'a5',label:'Type 5'},
        {id:'distribution_1',label:'Type 6',sub:'Dist'},
      ]
    },
    {% if pos_type == "medical_distribution" %}
    {
      key:'med_disct', name:'A4 - Medical Distribution', color:'#FF0000',
      templates:[
        {id:'expiry',label:'Expiry',sub:'Batch Wise'},
        {id:'secret_expiry',label:'Secret Expiry'},
        {id:'secret_expiry_t_2',label:'Secret Expiry (T2)'},
      ]
    },
    {% endif %}
    {
      key:'a5', name:'A5 — Half Page', color:'#e67e22',
      templates:[
        {id:'b1',label:'Type 1'},{id:'b2',label:'Type 2'},
        {id:'b3',label:'Type 3',sub:'Distribution'},{id:'b4',label:'Type 4'},
        {id:'list_rate_b5',label:'Type 5',sub:'List Rate'},{id:'b5',label:'Type 6',sub:'Urdu'},
      ]
    },
    {
      key:'thermal', name:'Thermal — POS Receipt', color:'#27ae60',
      templates:[
        {id:'t1',label:'80mm T1',sub:'Receipt'},{id:'t2',label:'80mm T2',sub:'Receipt'},
        {id:'t3',label:'80mm T3',sub:'Urdu'},
      ]
    },
  ];
 
  // ── Alt+P: render chips ────────────────────────────────────

  // shortkey sequence: 1-9 then a,b,c,d,e,f
  var _AP_SHORTKEYS = ['1','2','3','4','5','6','a','b','c','d','e','f','7','8','9'];

  function apRenderGrid() {
      var box = document.getElementById('ap-tpl-container');
      if (!box) return;
      box.innerHTML = '';
      var skIdx = 0;  // global counter across all categories

      AP_TEMPLATE_CONFIG.forEach(function(cat) {
          var catDiv = document.createElement('div');
          catDiv.innerHTML =
              '<div class="ap-cat-row">'
            + '<span class="ap-cat-dot" style="background:' + cat.color + ';"></span>'
            + '<span class="ap-cat-label">' + cat.name + '</span>'
            + '</div>';
          box.appendChild(catDiv);

          var chipsDiv = document.createElement('div');
          chipsDiv.className = 'ap-chips-row';

          cat.templates.forEach(function(t) {
              var sk = _AP_SHORTKEYS[skIdx] || '';
              var b = document.createElement('button');
              b.type = 'button';
              b.className = 'ap-chip';
              b.dataset.tplId = t.id;
              b.dataset.apKey = sk;
              b.style.setProperty('--ap-color', cat.color);
              b.innerHTML = (sk
                  ? '<span style="display:inline-flex;align-items:center;justify-content:center;'
                    + 'width:16px;height:16px;border-radius:4px;background:rgba(0,0,0,.09);'
                    + 'font-size:10px;font-weight:700;color:#444;margin-right:5px;flex-shrink:0;">'
                    + sk.toUpperCase() + '</span>'
                  : '')
                  + t.label
                  + (t.sub ? '<span class="ap-chip-sub">' + t.sub + '</span>' : '');
              chipsDiv.appendChild(b);
              skIdx++;
          });

          box.appendChild(chipsDiv);
      });
  }
 
  // ── Alt+P: keyboard navigation ─────────────────────────────
  var _apFocusIdx = 0;
 
  function apGetChips() {
      return Array.from(document.querySelectorAll('#ap-tpl-container .ap-chip'));
  }
 
  function apSetFocus(idx) {
      var chips = apGetChips();
      if (!chips.length) return;
      _apFocusIdx = Math.max(0, Math.min(idx, chips.length - 1));
      chips.forEach(function(c) { c.classList.remove('ap-focused'); });
      chips[_apFocusIdx].classList.add('ap-focused');
      chips[_apFocusIdx].focus();
  }
 
  $('#altPrintModal').on('shown.bs.modal', function() {
      apRenderGrid();
      _apFocusIdx = 0;
      setTimeout(function() { apSetFocus(0); }, 80);
  });
 
  $(document).on('keydown', '#altPrintModal', function(e) {
      var chips = apGetChips();
      if (!chips.length) return;

      // Shortkey: 1-9 or a-f → directly trigger matching chip
      var k = e.key.toLowerCase();
      if (!e.ctrlKey && !e.altKey && !e.metaKey && _AP_SHORTKEYS.indexOf(k) !== -1) {
          var target = document.querySelector('#ap-tpl-container .ap-chip[data-ap-key="' + k + '"]');
          if (target) {
              e.preventDefault();
              $(target).trigger('click');
              return;
          }
      }

      switch(e.key) {
          case 'ArrowRight': e.preventDefault(); apSetFocus(_apFocusIdx + 1); break;
          case 'ArrowLeft':  e.preventDefault(); apSetFocus(_apFocusIdx - 1); break;
          case 'ArrowDown':  e.preventDefault(); apSetFocus(_apFocusIdx + 4); break;
          case 'ArrowUp':    e.preventDefault(); apSetFocus(_apFocusIdx - 4); break;
          case 'Enter':
              e.preventDefault();
              var focused = document.querySelector('#ap-tpl-container .ap-chip.ap-focused');
              if (focused) { $(focused).trigger('click'); }
              break;
      }
  });
 
  // ── Alt+P chip click → save then print ────────────────────
  $(document).on('click', '.ap-chip', function() {
      var tplId = $(this).data('tpl-id');
      if (!tplId) return;
 
      $('#ap-tpl-container').hide();
      $('#ap-loading').show();
      $('#ap-hint').text('Saving invoice…');
 
      recalcAll();
      var payload = collectSalePayload();
      var credit_mode = isCreditMode();
      var cust = $('#searchbox_customers').val();
 
      if (Math.abs(payload.qty_posted) < 1) {
          $('#altPrintModal').modal('hide');
          Swal.fire('Save failed', 'No items to save!', 'error');
          return;
      }
      if (credit_mode && (!cust || cust.length < 1)) {
          $('#altPrintModal').modal('hide');
          Swal.fire({ icon:'error', title:'Save Failed', text:'Customer required for Credit Sale!' });
          $('#searchbox_customers').focus();
          return;
      }
 
      isInvoiceSubmitting = true;
      $.ajax({
          url:  $('.saleForm').attr('action'),
          type: 'POST',
          data: {
              csrfmiddlewaretoken: csrftoken,
              sale_items: JSON.stringify(payload),
              payment_remarks: payload.payment_remarks || '',
              post_to_fbr: '0',
              as_json: '1'
          },
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
          success: function(res) {
              isInvoiceSubmitting = false;
              if (!res || !res.ok) {
                  $('#altPrintModal').modal('hide');
                  Swal.fire('Save failed', res && res.error ? res.error : '', 'error');
                  return;
              }
              clearDraft();
              var invNo = res.invoice_no;
              var st    = ($('#sale_type').val() || '').toLowerCase();
              var suffix = (st === 'cash_return' || st === 'credit_return') ? 'return'
                          : (st === 'estimate') ? 'quotation'
                          : 'sale';
              var printUrl = '/invoices/invoice-templates/' + tplId + '/' + encodeURIComponent(invNo) + '/' + suffix + '/';
              $('#altPrintModal').modal('hide');
              window.open(printUrl + '?autoprint=1&close=afterprint', '_blank');
              setTimeout(function() {
                  window.location.href = "{% url 'sales:sales_add' %}";
              }, 300);
          },
          error: function(xhr) {
              isInvoiceSubmitting = false;
              $('#altPrintModal').modal('hide');
              var w = window.open('', '_blank');
              w.document.open(); w.document.write(xhr.responseText); w.document.close();
          }
      });
  });
 
  // ── Ctrl+P and Alt+P keyboard shortcuts ───────────────────
  $(document).on('keydown.ctrlAltPrint', function(e) {
      var isCtrlP = e.ctrlKey && !e.altKey && (e.key === 'p' || e.key === 'P' || e.which === 80);
      var isAltP  = e.altKey  && !e.ctrlKey && (e.key === 'p' || e.key === 'P' || e.which === 80);
 
      if (!isCtrlP && !isAltP) return;
      if ($('.modal.show').length) return;
      e.preventDefault();
 
      if (isCtrlP) {
          // Default print → same as existing Print button
          doAutoPrint();
      }

      if (isAltP) {
          // ── Pehle sab open Select2 dropdowns close karo ──
          try {
              // Method 1: har select2-initialized select ko close karo
              $('select').each(function() {
                  try {
                      if ($(this).data('select2')) $(this).select2('close');
                  } catch(e) {}
              });
              // Method 2: orphan dropdown elements direct remove karo
              $('.select2-container--open').removeClass('select2-container--open');
              $('.select2-dropdown').remove();
          } catch(e) {}
 
          // ── Template picker modal ──
          $('#ap-tpl-container').show();
          $('#ap-loading').hide();
          $('#ap-hint').text('Template choose karo');
 
          // z-index ensure (Bootstrap modal.show se pehle)
          $('#altPrintModal').css('z-index', '10500');
 
          $('#altPrintModal').modal('show');
      }
  });



  $(document).keydown(e=>{

    if(e.ctrlKey&&e.which===83) { e.preventDefault(); $('.btnSave').click(); }
    // Ctrl+U → Secret Profit Popup
    if (e.ctrlKey && (e.key === 'u' || e.key === 'U' || e.which === 85)) {
        e.preventDefault();
 
        // Agar pehle se open hai to close karo
        if ($('#secretProfitModal').hasClass('show')) {
            $('#secretProfitModal').modal('hide');
            return;
        }
 
        recalcAll();
        const _items = sale.products
            .filter(p => p.id && p.qty)
            .map(p => ({
                id:    p.id,
                name:  p.name || '',
                qty:   +p.qty  || 0,
                total: +p.total || 0,
            }));
 
        if (!_items.length) {
            Swal.fire({ icon:'info', title:'Koi item nahi', timer:1200, showConfirmButton:false });
            return;
        }
 
        // Loading state

        // ── Pehle sab Select2 close karo (overlap fix) ──
        try {
            $('select').each(function() {
                try { if ($(this).data('select2')) $(this).select2('close'); } catch(e) {}
            });
            $('.select2-dropdown').remove();
            $('.select2-container--open').removeClass('select2-container--open');
        } catch(e) {}
 
        // ── Safe modal show: pehle dispose karo (close-stuck fix) ──
        try { $('#secretProfitModal').modal('hide'); } catch(e) {}
 
        // Loading state
        $('#secret-profit-tbody').html(
            '<tr><td colspan="5" class="text-center py-3">'
            + '<i class="fas fa-spinner fa-spin text-primary"></i>'
            + '</td></tr>'
        );
        $('#secret-licence-code').text('Calculating…');
        $('#secret-gross').text('—');
        $('#secret-net').text('—');
 
        setTimeout(function() {
            $('#secretProfitModal').modal('show');
        }, 50);
        $.ajax({
            url:  "{% url 'sales:ajax_profit_calc' %}",
            type: 'POST',
            data: {
                csrfmiddlewaretoken: csrftoken,
                items:         JSON.stringify(_items),
                flat_discount: +$('#flat_discount').val()     || 0,
                transport:     +$('#transport_charges').val() || 0,
                other:         +$('#other_charges').val()     || 0,
                adv_tax:       +$('#flat_sale_tax').val()     || 0,
            },
            success: function(res) {
                if (!res.ok) return;
 
                // Table rows
                const tbody = res.rows.map(r =>
                    `<tr>
                      <td>${r.name}</td>
                      <td class="text-right">${r.qty}</td>
                      <td class="text-right">${fmt2(r.sale_price)}</td>
                      <td class="text-right">${fmt2(r.fifo_cost)}</td>
                      <td class="text-right">${fmt2(r.profit)}</td>
                    </tr>`
                ).join('');
                $('#secret-profit-tbody').html(tbody);
 
                const net = Math.round(res.net_profit);
                $('#secret-gross').text(fmt2(res.gross_profit));
                $('#secret-net').text(fmt2(net));
 
                // Secret licence string: SLS3342-3S-{profit}-LEX-2324
                $('#secret-licence-code').text('SLS3342-3S-' + net + '-LEX-2324');
            },
            error: function() {
                $('#secret-profit-tbody').html('<tr><td colspan="5" class="text-danger text-center">Error</td></tr>');
            }
        });
    }
    if(e.ctrlKey && e.which === 87) { e.preventDefault(); doWhatsApp(); }
    if (e.ctrlKey && e.which === 81) {
      e.preventDefault();
      const cur = ($('#sale_type').val() || '').toString();
      const map = {
        cash: 'credit',
        credit: 'cash',
        cash_return: 'credit_return',
        credit_return: 'cash_return',
      };
      const nxt = map[cur] || 'cash';
      $('#sale_type').val(nxt).trigger('change');
      if (nxt === 'credit' || nxt === 'credit_return') {
        closeAnyOpenSelect2({ blur: false });
        $('#searchbox_customers').select2('open');
      } else {
        ensureNextRowFocusOrCreate();
      }
    }

    if (e.ctrlKey && !e.shiftKey && e.which >= 49 && e.which <= 57) {
      const idx = e.which - 49; // zero-based option index
      const $rt = $('#rate_type');
      if (idx < $rt.find('option').length) {
        e.preventDefault();
        $rt.prop('selectedIndex', idx).trigger('change');
      }
    }
    });
  $(document).on('keydown', function (e) {
    if (e.key !== 'End' && e.which !== 35) return;
    if ($('.modal.show').length) return;
    e.preventDefault();
 
    var _st = ($('#sale_type').val() || '').toLowerCase();
    if (_st === 'credit' || _st === 'credit_return') {
        // Quick Pay nahi — sirf first bank amount input par focus
        var _el = document.querySelector(
            '#bankPaymentsContainer .bank-row.primary-row .bp-amount-input'
        );
        if (_el) { _el.focus(); _el.select(); }
    } else {
        openQuickPayDialog();
    }
  });

  // ╔══════════════════════════════════════════════════════════════╗
  // ║   18 — INITIALIZATION & EDIT MODE LOADING                    ║
  // ╚══════════════════════════════════════════════════════════════╝

  $(function(){
    applyCodeColumnVisibility();
    splitCodeName50IfNeeded(); // NEW: first pass after layout
    initVendorSelect2();
    window.addEventListener('resize', function(){
      applyCodeColumnVisibility();
      splitCodeName50IfNeeded(); // NEW: keep split on resize
    });

    enforceDomainRestrictions();
    $('#sale_type').off('change.applyModeUI').on('change.applyModeUI', applyModeUI);
    applySaleTypeUX();
    });

  $(function () {
      var custName   = ($('#contract_customer_name').val() || '').trim();
      var custId = ($('#contract_customer_id').val() || '').toString().trim();
      custId = parseInt(custId.replace(/[^\d]/g, ''), 10) || 0;
      var contractId = ($('#contract_id').val() || '').toString().trim();
      contractId = parseInt(contractId.replace(/[^\d]/g, ''), 10) || 0;
      if (!contractId || !custId) {
          return;
      }
      $('#sale_type').val('credit');
      const txt = custName || ('Customer #' + custId);
      const opt = new Option(txt, custId, true, true);
      ensureSelect2('#searchbox_customers');
      $('#searchbox_customers').append(opt).trigger('change.select2');
    });

  {% if settings_dict.business_type == 'distribution' %}
    document.addEventListener('DOMContentLoaded', () => {
      const sel = document.getElementById('sale_type');
      if (sel && sel.value !== 'credit') {
        sel.value = 'credit';
        sel.dispatchEvent(new Event('change'));
      }
    });

    window.selectedAreaId = null;
    (function initSaleAreaSelect() {
      const $saleArea = $('#sale_area');
      if (!$saleArea.length) return;

      $saleArea
        .select2({
          theme: 'bootstrap4',
          width: '100%',
          placeholder: 'Search Area…',
          minimumInputLength: 1,
          allowClear: true,
          ajax: {
            url: "{% url 'customers:get_sale_areas' %}",
            type: 'POST',
            delay: 250,
            headers: { 'X-CSRFToken': csrftoken },
            data: p => ({ term: p.term }),
            processResults: d => ({ results: d })
          }
        })
        .on('select2:open', () => {
          setTimeout(() => {
            const fld = document.querySelector('.select2-container--open .select2-search__field');
            if (!fld) return;

            // focus as soon as it opens
            fld.focus();

            const onEnterOpenCustomers = (ev) => {
              if (ev.key === 'Enter') {
                ev.preventDefault();                  // prevent default selection/submit
                $saleArea.select2('close');           // close area dropdown
                $('#searchbox_customers').select2('open');  // open customers
                setTimeout(() => {
                  const cf = document.querySelector('.select2-container--open .select2-search__field');
                  if (cf) cf.focus();
                }, 0);
              }
            };

            // attach and cleanup
            fld.addEventListener('keydown', onEnterOpenCustomers);
            $saleArea.one('select2:close', () => {
              try { fld.removeEventListener('keydown', onEnterOpenCustomers); } catch (_) {}
            });
          }, 0);
        })
        .on('select2:select', (e) => {
          window.selectedAreaId = e.params.data.id;      // sale_areas.t_id

          const $cust = $('#searchbox_customers');
          $cust.val(null).trigger('change');            // clear previous selection (different area)
          $cust.select2('open');
          setTimeout(() => {
            const cf = document.querySelector('.select2-container--open .select2-search__field');
            if (cf) cf.focus();
          }, 0);
        })
        .on('select2:clear', () => {
          window.selectedAreaId = null;                  // back to global mode
          $('#searchbox_customers').val(null).trigger('change');
        });
    })();

  {% endif %}

  if (initialSale && initialSale.flat_discount != null) {
      $('#flat_discount').val(initialSale.flat_discount);
      $('#transport_charges').val(initialSale.transport_charges);
      $('#other_charges').val(initialSale.other_charges);
      $('#flat_sale_tax').val(initialSale.flat_sale_tax);

      // Payment fields
      $('#payment_method').val(initialSale.payment_method);
      $('#payment_remarks').val(initialSale.payment_remarks || '');
      if (initialSale.ref_sale_invoice) {
        $('#ref_sale_invoice').val(initialSale.ref_sale_invoice);
      }
      // ── Multi-Bank Prefill ──
      if (initialSale.bank_payments && initialSale.bank_payments.length > 0) {
        // Fill primary row with first entry
        const primary = initialSale.bank_payments[0];
        const $primaryRow = $('#bankPaymentsContainer .bank-row.primary-row');
        $primaryRow.find('.bp-bank-select').val(primary.bank_id);
        $primaryRow.find('.bp-amount-input').val(primary.amount || '');

        // Add remaining bank rows
        for (let i = 1; i < initialSale.bank_payments.length; i++) {
          const bp = initialSale.bank_payments[i];
          addBankPaymentRow(bp.bank_id, bp.amount);
        }
      } else {
        // Fallback: old-style single bank
        if (initialSale.selected_bank) {
          $('#bankPaymentsContainer .primary-row .bp-bank-select').val(initialSale.selected_bank);
        }
        if (initialSale.amount_transaction) {
          $('#bankPaymentsContainer .primary-row .bp-amount-input').val(initialSale.amount_transaction);
        }
      }

      // ── Cheques Prefill ──
      if (initialSale.cheques && initialSale.cheques.length > 0) {
        $('#chequeSection').show();
        initialSale.cheques.forEach(function(ch) {
          addChequeRow(ch);
        });
      }

      updatePaymentSummary();

      const saletype = initialSale.saletype || '';
      // if (saletype === 'vendor_sale' || saletype === 'vendor_return') {
      //     // Prefill vendor select2
      //     if (initialSale.customer) {
      //         const txt = initialSale.description || '';
      //         const opt = new Option(txt, initialSale.customer, true, true);
      //         ensureSelect2('#searchbox_vendors');
      //         $('#searchbox_vendors').append(opt).trigger('change.select2');
      //     }
      // }

      // Load vendor if vendor_sale or vendor_return
      if (saletype === 'vendor_sale' || saletype === 'vendor_return') {
        if (initialSale.vendor_id && initialSale.vendor_name) {
          const $vendorSelect = $('#searchbox_vendors');
          if ($vendorSelect.length) {
            const opt = new Option(initialSale.vendor_name, initialSale.vendor_id, true, true);
            $vendorSelect.append(opt).trigger('change.select2');
          }
        }
      }
      else if (initialSale.customer) {
          // Prefill customer select2 (existing code)
          const txt = initialSale.description || '';
          const opt = new Option(txt, initialSale.customer, true, true);
          ensureSelect2('#searchbox_customers');
          $('#searchbox_customers').append(opt).trigger('change.select2');
      }

      // Order booker select2 (if provided)
      if (initialSale.order_booker_id) {
        const obTxt = initialSale.order_booker_name || '';
        const obOpt = new Option(obTxt, initialSale.order_booker_id, true, true);
        ensureSelect2('#order_booker');
        $('#order_booker').append(obOpt).trigger('change.select2');
      }

      // ---------- Sale meta ----------
      $('#sale_type').val(initialSale.saletype).trigger('change');
      $('#sale_date').val(initialSale.saledate);
      $('#saleperson').val(initialSale.saleperson).trigger('change');

      // ---------- Product rows ----------
      const $tb = $('#table_products tbody');

      (initialSale.products || []).forEach(function(p){
        // 1) create a blank row
        const $row = addRow();

        // 2) base data for the row → fillRow (lets your rate-type logic run)
        const base = {
          id: p.id,
          code: p.code,
          name: p.name,
          qty: +p.qty,
          pcs: +p.pcs,
          bonus: +p.bonus,
          bags_qty: +p.bags_qty || 0,
          present_stock: +p.present_stock,   // product-level stock (non-variant cases)
          price: +p.price,
          gst: +p.gst,
          f_tax: +p.f_tax,
          disc: +p.disc,
          to: +p.to,
          p_per_pack: +p.p_per_pack || 1,
          item_wise_price: +p.item_wise_price || 0,
          spec_a: p.spec_a || '',
          spec_b: p.spec_b || '',
          loading: +p.loading || 0,
          packets: +p.packets || 0,
          fbr_sale_type: p.fbr_sale_type || '',
        };
        fillRow($row, base);  // also wires name/code UI & triggers row recalc later
        // NEW: Prime variants FIRST (async, so wait with .always)
          primeVariantsForRow($row).always(function(){
            // Now set specs AFTER priming (so options are populated)
            if (p.spec_a_id && p.spec_a_name) {
              const $specASelect = $row.find('.spec-a-select');
              // Append only if not already present (avoids duplicates)
              if (!$specASelect.find(`option[value="${p.spec_a_id}"]`).length) {
                $specASelect.append(new Option(p.spec_a_name, p.spec_a_id));
              }
              // Explicitly set value and trigger plain 'change' (not .select2)
              $specASelect.val(p.spec_a_id).trigger('change');
            }

            if (p.spec_b_id && p.spec_b_name) {
              const $specBSelect = $row.find('.spec-b-select');
              if (!$specBSelect.find(`option[value="${p.spec_b_id}"]`).length) {
                $specBSelect.append(new Option(p.spec_b_name, p.spec_b_id));
              }
              $specBSelect.val(p.spec_b_id).trigger('change');
            }

            // Pick variant based on specs (if any) - call your picker function
            pickVariantFromSpecs($row);
          });

        // 3) stable line UID (so edits keep same identity)
        if (p.line_uid) { $row.find('.line-uid-input').val(p.line_uid); }

        // 6) ensure UI mirrors current numbers & totals refresh
        $row.find('.qty-input').trigger('change');
      });

      setTimeout(() => {
        const tableContainer = document.querySelector('.table-responsive');
        if (tableContainer) {
          tableContainer.scrollTop = tableContainer.scrollHeight;
        }
      }, 200);

      // ---------- Finalize ----------
      // Sync loading & packets from rowObj to sale.products for weight calculation
      $('#table_products tbody tr').not('.template-row').each(function() {
        const rowObj = $(this).data('rowObj');
        if (rowObj && rowObj.id) {
          // Ensure loading & packets are in rowObj for recalcAll
          const prodData = (initialSale.products || []).find(p => p.id === rowObj.id);
          if (prodData) {
            rowObj.loading = +(prodData.loading || 0);
            rowObj.packets = +(prodData.packets || 0);
          }
        }
      });
      
      // Ensure other_charges is set from saved value BEFORE recalcAll
      if (initialSale.other_charges != null) {
        $('#other_charges').val(initialSale.other_charges);
      }
      
      // recalcAll();
      
      // Mark edit load as complete - now auto calculations can run
      // _editLoadComplete = true;
      // // Ensure other_charges is set from saved value BEFORE recalcAll
      // if (initialSale.other_charges != null) {
      //   $('#other_charges').val(initialSale.other_charges);
      // }
      
      // Calculate weight immediately for loaded products
      if (settingsDict.show_weight) {
        let totalWeight = 0;
        sale.products.forEach(p => {
          const itemQty = +(p.qty || 0);
          const packets = +(p.packets || 0);
          totalWeight += itemQty * packets;
        });
        $('#nav_weight_count').text(totalWeight.toFixed(2));
        $('.fn-badge-weight').show();
      }
      
      recalcAll();
      
      // Mark edit load as complete - now auto calculations can run
      _editLoadComplete = true;

      // Ready for next entry: add one blank row (but DON'T auto-open select2)
      const $next = addRow();
      
      // Scroll items table to bottom to show last row
      setTimeout(() => {
        const tableContainer = document.querySelector('.table-responsive');
        if (tableContainer) {
          tableContainer.scrollTop = tableContainer.scrollHeight;
        }
      }, 300);
      // Skip focusFirstFieldForRow in edit mode - it opens select2 and breaks fixed-bottom nav
      setTimeout(function(){
        // Table area scroll to top
        var $tableArea = $('.saleForm > .p-3');
        $tableArea.scrollTop(0);
        $tableArea.find('.table-responsive').scrollTop(0);
      }, 150);
    }


   else {
      const $firstRow = addRow();
      focus_management_on_page_load($firstRow);
      _editLoadComplete = true;  // New invoice - allow auto calculations immediately
    }

  // Skipped items popup (estimate→sale conversion, zero_stock_allow=False)
  if (typeof skippedItems !== 'undefined' && skippedItems.length > 0) {
    const rows = skippedItems.map(i =>
      `<tr><td class="text-left">${spEsc(i.name)}</td><td class="text-center">${i.qty_in_estimate}</td><td class="text-center text-danger fw-bold">${i.available_stock}</td></tr>`
    ).join('');
    Swal.fire({
      icon: 'warning',
      title: 'Few Items are skipped.',
      html: `<p class="small text-muted mb-2">These items are skipped due to Non-Availibity of Stock.</p>
             <table class="table table-sm table-bordered mb-0">
               <thead class="thead-light"><tr><th>Product</th><th>Est. Qty</th><th>Available</th></tr></thead>
               <tbody>${rows}</tbody>
             </table>`,
      confirmButtonText: 'Ok, I Understand!',
      width: '520px',
    });
  }
  

  $(document).on('select2:open', function (e) {
    __lastOpenSelect2 = e.target;
    });

  window.addEventListener('pointerdown', () => {
    __pointerDown = true;
    setTimeout(() => (__pointerDown = false), 350);
    }, true);

  // ╔══════════════════════════════════════════════════════════════╗
  // ║   18 — INITIALIZATION & EDIT MODE LOADING                    ║
  // ╚══════════════════════════════════════════════════════════════╝


  // ── Row focus → bar sync ──
  $(document).on('focusin', '#table_products tbody tr:not(.template-row)', function () {
    var ro = $(this).data('rowObj');
    if (ro && ro.code) updateInfoBar(ro);
    });

  // ── Sale history click ──
    function _todayStr() {
      var d = new Date();
      return d.getFullYear() + '-' +
             String(d.getMonth()+1).padStart(2,'0') + '-' +
             String(d.getDate()).padStart(2,'0');
    }
    function _monthStartStr() {
      var d = new Date();
      return d.getFullYear() + '-' +
             String(d.getMonth()+1).padStart(2,'0') + '-01';
    }

    // ── History loader ──
    function _loadHistoryTable(prodId, custName, dateFrom, dateTo) {
      $('#pibHistBody').html(
        '<div class="text-center p-4 text-muted">' +
        '<i class="fas fa-spinner fa-spin fa-2x"></i></div>'
      );

      $.ajax({
        url: "{% url 'products:get_customer_product_history' %}",
        type: 'GET',
        data: {
          product_id: prodId,
          customer_name: custName,
          date_from: dateFrom,
          date_to:   dateTo
        },
        headers: { 'X-CSRFToken': csrftoken },
        success: function (res) {
          if (!res.history || !res.history.length) {
            $('#pibHistBody').html(
              '<p class="text-center text-muted p-4">' +
              '<i class="fas fa-inbox fa-2x d-block mb-2"></i>' +
              'No history found for selected range</p>'
            );
            return;
          }

          var rows = '';
          var totalQty = 0, totalAmt = 0;
          res.history.forEach(function (h) {
            var qty = +(h.quantity || 0);
            var amt = +(h.total_price || h.total || 0);
            totalQty += qty;
            totalAmt += amt;
            rows +=
              '<tr>' +
              '<td>' + (h.invoice_no || '—') + '</td>' +
              '<td>' + (h.date || h.sale_date || '—') + '</td>' +
              '<td class="text-right">' + fmt2(qty) + '</td>' +
              '<td class="text-right font-weight-bold text-primary">' +
                fmt2(h.item_price || 0) + '</td>' +
              '<td class="text-right">' + fmt2(amt) + '</td>' +
              '</tr>';
          });

          // Summary footer row
          rows +=
            '<tr class="table-warning font-weight-bold">' +
            '<td colspan="2" class="text-right">Total</td>' +
            '<td class="text-right">' + fmt2(totalQty) + '</td>' +
            '<td></td>' +
            '<td class="text-right">' + fmt2(totalAmt) + '</td>' +
            '</tr>';

          $('#pibHistBody').html(
            '<table class="table table-sm table-striped mb-0">' +
            '<thead class="thead-light"><tr>' +
            '<th>Invoice</th><th>Date</th>' +
            '<th class="text-right">Qty</th>' +
            '<th class="text-right">Price</th>' +
            '<th class="text-right">Total</th>' +
            '</tr></thead><tbody>' + rows + '</tbody></table>'
          );

          var last = res.history[res.history.length - 1];
          if (last && last.item_price) updateLastRatePill(last.item_price);
        },
        error: function () {
          $('#pibHistBody').html(
            '<p class="text-center text-danger p-4">Error loading history</p>'
          );
        }
      });
    }

    function openSaleHistory(rowObj) {
      if (!rowObj || !rowObj.code) return;

      var custName = ($('#searchbox_customers').find('option:selected').text() || '').trim();
      if (!custName) {
        try {
          var sd = $('#searchbox_customers').select2('data');
          if (sd && sd.length) custName = sd[0].text || sd[0].name || '';
        } catch(_) {}
      }

      var prodId = rowObj.prod_id || rowObj.id || 0;

      $('#pibHistTitle').text(
        spTitleCase(rowObj.name || rowObj.code || '') + ' — Sale History' +
        (custName ? ' | ' + spTitleCase(custName) : '')
      );

      // Default dates: month start → today
      $('#pibDateFrom').val(_monthStartStr());
      $('#pibDateTo').val(_todayStr());

      // Store for re-fetch button
      $('#pibHistModal').data('prodId',   prodId);
      $('#pibHistModal').data('custName', custName);

      $('#pibHistModal').modal('show');
      _loadHistoryTable(prodId, custName, _monthStartStr(), _todayStr());
    }

  // Info bar Last chip click
  $('#pibLast').on('click', function () {
    openSaleHistory(_pibRowObj);
  });

  // Search button click
  $('#pibFilterBtn').on('click', function () {
    var prodId   = $('#pibHistModal').data('prodId');
    var custName = $('#pibHistModal').data('custName') || '';
    var df = $('#pibDateFrom').val();
    var dt = $('#pibDateTo').val();
    if (!df || !dt) {
      Swal.fire({
        icon:'warning', title:'Date required',
        text:'Please select both From and To dates.',
        timer:1800, showConfirmButton:false
      });
      return;
    }
    _loadHistoryTable(prodId, custName, df, dt);
  });

  // Enter key on date inputs → trigger search
  $('#pibDateFrom, #pibDateTo').on('keydown', function (e) {
    if (e.key === 'Enter') $('#pibFilterBtn').trigger('click');
  });




  {% include "sales/styles_and_script/sales_script_helpers.html" %}



  // ╔══════════════════════════════════════════════════════════════════╗
  // ║  QUICK FEATURES                                                   ║
  // ║  F-1: +/− prev-row qty  |  F-2: Ctrl+D delete  |  F-3: Quick Pay ║
  // ╚══════════════════════════════════════════════════════════════════╝

  // ── F-1 : + یا − key empty qty پر → اوپر والی row کی qty adjust ──
  $(document).on('keydown', '.qty-input', function (e) {
      if (e.ctrlKey || e.altKey || e.metaKey) return;
      if (e.key !== '+' && e.key !== '-') return;

      // صرف tab بھی ہو اگر field empty/zero ہو
      var rawVal = this.value;
      if (rawVal !== '' && rawVal !== '0') return;

      e.preventDefault();
      var delta = (e.key === '+') ? 1 : -1;

      var $all = $('#table_products tbody tr').not('.template-row');
      var idx  = $all.index($(this).closest('tr'));
      if (idx <= 0) return;   // کوئی اوپر والی row نہیں

      var $prevQty = $all.eq(idx - 1).find('.qty-input');
      var newVal   = Math.max(0, (+$prevQty.val() || 0) + delta);
      $prevQty.val(newVal).trigger('change');
  });

  // Alt+H → focused row ki sale history
  // ── Alt+N: New Sale tab | Alt+R: New Return tab | Alt+E: New Estimate tab ──
  $(document).on('keydown.altNewTab', function(e) {
    if (!e.altKey || e.ctrlKey || e.metaKey) return;
    const k = e.key.toLowerCase();
    if (k === 'n') {
      e.preventDefault();
      window.open("{% url 'sales:sales_add' %}", '_blank');
    } else if (k === 'r') {
      e.preventDefault();
      window.open("{% url 'sales:sales_return_add' %}", '_blank');
    } else if (k === 'e') {
      e.preventDefault();
      window.open("{% url 'sales:estimates_add' %}", '_blank');
    }
  });

  $(document).on('keydown.altH', function (e) {
    if (!e.altKey || (e.key !== 'h' && e.key !== 'H')) return;
    e.preventDefault();

    // focused row کا rowObj نکالیں
    var $row = $(document.activeElement)
                   .closest('#table_products tbody tr')
                   .not('.template-row');
    var ro = $row.length ? $row.data('rowObj') : _pibRowObj;
    if (!ro || !ro.code) {
      Swal.fire({
        icon:'info', title:'No product selected',
        text:'Focus on a product row first, then press Alt+H.',
        timer:1800, showConfirmButton:false
      });
      return;
    }
    openSaleHistory(ro);
  });


  // ── F4 → Last row ka code input focus ──
  $(document).on('keydown.f4Code', function (e) {
    if (e.key !== 'F4') return;
    // select2 dropdown open ho to band karo pehle
    if ($('.select2-container--open').length) return;
    e.preventDefault();
    var $rows = $('#table_products tbody tr').not('.template-row');
    if (!$rows.length) { var $n = addRow(); focusFirstFieldForRow($n); return; }
    focusFirstFieldForRow($rows.last());
  });

  // ── F5 → Last row ka name select2 focus (native capture: Chrome refresh rok'ta hai) ──
  window.addEventListener('keydown', function(e) {
    if (e.key !== 'F5') return;
    e.preventDefault();
    e.stopPropagation();
    if ($('.select2-container--open').length) {
      closeAnyOpenSelect2({ blur: false });
      return;
    }
    var $rows = $('#table_products tbody tr').not('.template-row');
    var $last = $rows.length ? $rows.last() : addRow();
    var $nameSel = $last.find('.search-product');
    if (!$nameSel.length) return;
    try { $nameSel.select2('open'); } catch(_) {}
    setTimeout(function() {
      var fld = document.querySelector('.select2-container--open .select2-search__field');
      fld && fld.focus();
    }, 0);
  }, true); // capture:true — browser se pehle intercept karo

  // ── Ctrl+O → Sale Report new tab ──
  $(document).on('keydown.ctrlO', function (e) {
    if (!(e.ctrlKey && (e.key === 'o' || e.key === 'O'))) return;
    e.preventDefault();
    window.open("{% url 'sales:sales_list' %}", '_blank');
  });

  // ── F-2 : Ctrl+D → focused row delete (کم از کم 1 empty row رہے) ──
  $(document).on('keydown.qfDel', function (e) {
      if (!(e.ctrlKey && (e.key === 'd' || e.key === 'D'))) return;

      e.preventDefault();
      e.stopImmediatePropagation();

      // Select2 search field andar focus ho → us row ko target karo, select2 band karo
      var $row;
      if ($(document.activeElement).hasClass('select2-search__field')) {
        closeAnyOpenSelect2({ blur: false });
        $row = (window.__activeProductRow && window.__activeProductRow.length)
               ? window.__activeProductRow.not('.template-row')
               : $();
      } else {
        $row = $(document.activeElement)
                   .closest('#table_products tbody tr')
                   .not('.template-row');
      }

      if (!$row || !$row.length) return;

      var $all = $('#table_products tbody tr').not('.template-row');

      // آخری row اور پہلے سے empty ہے → کچھ نہ کریں
      if ($all.length === 1 && __isRowEmpty($row)) return;

      var ro = $row.data('rowObj');
      if (ro) sale.products = sale.products.filter(function(o){ return o !== ro; });

      var wasOnly = ($all.length === 1);
      $row.remove();

      if (wasOnly) {
          var $new = addRow();
          focusFirstFieldForRow($new);
      } else {
          recalcAll();
          var $rem = $('#table_products tbody tr').not('.template-row');
          if ($rem.length) focusFirstFieldForRow($rem.last());
      }
  });

  // ── F-3 : Quick Payment Dialog ──
  var _qpOpen = false;

  function openQuickPayDialog() {
      if (_qpOpen || isInvoiceSubmitting) return;
      recalcAll();

      if (!(sale.grand > 0)) {
          Swal.fire({
              icon: 'warning', title: 'Bill is empty',
              text: 'Add items before proceeding to payment.',
              timer: 1800, showConfirmButton: false
          });
          return;
      }

      _qpOpen = true;
      $('#qpBillTotal').text(fmt2(sale.grand));
      $('#qpReceived').attr('min', sale.grand.toFixed(2)).val(sale.grand.toFixed(2));
      _qpCalcChange();
      $('#quickPayModal').modal('show');

  }

  function _qpCalcChange() {
      var recv  = +$('#qpReceived').val() || 0;
      var total = sale.grand;
      var diff  = +(recv - total).toFixed(2);
      var insufficient = recv < total;

      if (recv <= 0) {
          $('#qpChangeRow').hide();
      } else {
          $('#qpChangeRow').show();
          if (diff >= 0) {
              $('#qpChangeRow').css({ background: '#f0fdf4', borderColor: '#bbf7d0' });
              $('#qpChangeLabel').text('Change:');
              $('#qpChangeAmt').css('color', '#16a34a').text(fmt2(diff));
          } else {
              $('#qpChangeRow').css({ background: '#fff1f2', borderColor: '#fecdd3' });
              $('#qpChangeLabel').text('Still owed:');
              $('#qpChangeAmt').css('color', '#dc2626').text(fmt2(Math.abs(diff)));
          }
      }

      // Paid amount bill total se kam ho to Save button hi disable kar do +
      // input ko red outline — koi popup nahi, action khud hi block ho jati hai.
      $('#qpSaveBtn').prop('disabled', insufficient);
      $('#qpReceived').css('border-color', insufficient ? '#dc2626' : '');
  }

  function _qpSave() {
      if (isInvoiceSubmitting) return;
      var recv = +$('#qpReceived').val() || sale.grand;

      // Paid amount bill total se kam ho to seedha minimum (bill total) par
      // snap kar do — ye Enter/click save ke tor par count nahi hoti, sirf
      // value correct hoti hai; agla Enter/click normally proceed karega.
      if (recv < sale.grand) {
          $('#qpReceived').val(sale.grand.toFixed(2));
          _qpCalcChange();
          return;
      }

      // Primary bank row میں received amount ڈالیں
      $('#bankPaymentsContainer .bank-row.primary-row .bp-amount-input')
          .val(recv.toFixed(2))
          .trigger('change');

      $('#quickPayModal').modal('hide');
      _qpOpen = false;

      setTimeout(doAutoPrint, 150);
  }

  function _qpClose() {
      $('#quickPayModal').modal('hide');
      _qpOpen = false;

      setTimeout(function () {
          var $rows = $('#table_products tbody tr').not('.template-row');
          if (!$rows.length) return;
          var $last = $rows.last();
          if (__isRowEmpty($last)) {
              focusFirstFieldForRow($last);
          } else {
              var $n = addRow();
              focusFirstFieldForRow($n);
          }
      }, 200);
  }

  // Quick Pay modal events
  $('#qpReceived').on('input keyup', _qpCalcChange);

  // Field se bahar jate waqt (blur) bhi kam amount ko minimum par snap kar do
  // — field kabhi bhi invalid (bill total se kam) value par "rest" nahi karti.
  $('#qpReceived').on('blur', function () {
      var recv = +$(this).val() || 0;
      if (recv > 0 && recv < sale.grand) {
          $(this).val(sale.grand.toFixed(2));
          _qpCalcChange();
      }
  });

  $('#qpReceived').on('keydown', function (e) {
      if (e.key === 'Enter')  { e.preventDefault(); _qpSave();  }
      if (e.key === 'Escape') { e.preventDefault(); _qpClose(); }
      if (e.key === 'ArrowUp') { e.preventDefault(); $('#flat_discount').focus().select(); }
  });

  // Flat Discount inside Quick Pay — same #flat_discount field the main
  // form uses, same validation, so it saves as a normal flat discount.
  $('#qpFlatDiscount').on('input keyup', function () {
      $('#flat_discount').val($('#qpFlatDiscount').val());
      recalcAll();
      if (!enforceDiscountLimit()) {
          $('#qpFlatDiscount').val('');   // enforceDiscountLimit already cleared #flat_discount + recalculated
      }
      $('#qpBillTotal').text(fmt2(sale.grand));
      $('#qpReceived').val(sale.grand.toFixed(2));
      _qpCalcChange();
  });

  $('#qpFlatDiscount').on('keydown', function (e) {
      if (e.key === 'Enter')  { e.preventDefault(); $('#qpReceived').focus().select(); }
      if (e.key === 'Escape') { e.preventDefault(); _qpClose(); }
  });

  $('#qpSaveBtn').on('click',   _qpSave);
  $('#qpCancelBtn').on('click', _qpClose);

  $('#quickPayModal').on('shown.bs.modal', function () {
      var el = document.getElementById('qpReceived');
      if (!el) return;
      el.focus();
      el.select();
  });

  $('#quickPayModal').on('hidden.bs.modal', function () { _qpOpen = false; });

  // F12 shortcut (End key already handled by Change 2 above)
  $(document).on('keydown.qpF12', function (e) {
      if (e.key !== 'F12' && e.which !== 123) return;
      if ($('#quickPayModal').hasClass('show')) return;
      e.preventDefault();
      openQuickPayDialog();
  });


    // Secret Profit Modal — Esc se band karo
    $('#secretProfitModal').on('shown.bs.modal', function() {
        $(this).focus();   // keyboard events capture ke liye
    });
 
    // Cross button ka click bhi explicitly handle karo
    $(document).on('click', '#secretProfitClose, #secretProfitModal [data-dismiss="modal"]', function() {
        $('#secretProfitModal').modal('hide');
    });
 
    // Esc key (modal ke andar aur bahar dono)
    $(document).on('keydown.secretClose', function(e) {
        if (e.key !== 'Escape') return;
        if ($('#secretProfitModal').hasClass('show')) {
            e.stopImmediatePropagation();
            $('#secretProfitModal').modal('hide');
        }
    });
 
    // After hide: backdrop properly saaf karo
    $('#secretProfitModal').on('hidden.bs.modal', function() {
        // Agar koi orphan backdrop reh jae to remove karo
        if (!$('.modal.show').length) {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open').css('padding-right', '');
        }
    });

  // pibHistModal — backdrop + modal-open cleanup
  $('#pibHistModal').on('hidden.bs.modal', function() {
      if (!$('.modal.show').length) {
          $('.modal-backdrop').remove();
          $('body').removeClass('modal-open').css('padding-right', '');
      }
  });

$('#fifoLayersModal').on('hidden.bs.modal', function() {
      if (!$('.modal.show').length) { $('.modal-backdrop').remove(); $('body').removeClass('modal-open').css('padding-right',''); }
  });
  {% if pos_type == "pharmacy" %}
  $('#expiryBatchModal').on('hidden.bs.modal', function() {
      if (!$('.modal.show').length) { $('.modal-backdrop').remove(); $('body').removeClass('modal-open').css('padding-right',''); }
  });
  {% endif %}

  // ── DRAFT AUTOSAVE (client-side localStorage draft, restore-on-crash) ──
  const DRAFT_KEY = 'sale_draft_new';

  function saveDraftNow() {
    try {
      const payload = collectSalePayload();
      if (!payload.products || !payload.products.length) return;   // don't persist an empty draft
      localStorage.setItem(DRAFT_KEY, JSON.stringify({ payload, saved_at: Date.now() }));
    } catch (e) { /* storage full/unavailable — silently ignore */ }
  }

  function clearDraft() {
    try { localStorage.removeItem(DRAFT_KEY); } catch (e) {}
  }

  let _draftSaveTimer = null;
  function scheduleDraftSave() {
    clearTimeout(_draftSaveTimer);
    _draftSaveTimer = setTimeout(saveDraftNow, 5000);   // save 5s after user stops typing
  }

  // Any change anywhere in the invoice form schedules a debounced draft save
  $(document).on('input change', '.saleForm input, .saleForm select, .saleForm textarea', function(){
    scheduleDraftSave();
  });

  function restoreDraftIntoForm(payload) {
    if (payload.saletype) {
      $('#sale_type').val(payload.saletype).trigger('change');
    }
    $('#sale_date').val(payload.saledate);
    $('#sale_area').val(payload.area);
    $('#order_booker').val(payload.order_booker);
    $('#veh_hidden_id').val(payload.veh_hidden_id);
    $('#veh_hidden_reading').val(payload.veh_hidden_reading);
    $('#cash_customer_phone').val(payload.cash_customer_phone);
    $('#cash_customer_name').val(payload.cash_customer_name);
    $('#cash_customer_address').val(payload.cash_customer_address);
    $('#cash_customer_voucher_no').val(payload.cash_customer_voucher_no);
    $('#flat_discount').val(payload.flat_discount);
    $('#transport_charges').val(payload.transport_charges);
    $('#other_charges').val(payload.other_charges);
    $('#flat_sale_tax').val(payload.flat_sale_tax);
    $('#payment_remarks').val(payload.payment_remarks);
    $('#contract_id').val(payload.contract_id || '');
    $('#hold_flag').val(payload.hold ? '1' : '0');

    const isVendor = (payload.saletype === 'vendor_sale' || payload.saletype === 'vendor_return');
    if (isVendor && payload.customer) {
      const vOpt = new Option(payload.vendor_text || '', payload.customer, true, true);
      $('#searchbox_vendors').append(vOpt).trigger('change');
    } else if (payload.customer) {
      const cOpt = new Option(payload.customer_text || '', payload.customer, true, true);
      $('#searchbox_customers').append(cOpt).trigger('change');
    }

    // Rebuild product rows — addRow(item) already supports hydrating a row from data
    // (NOTE: variant/warehouse/batch selects and serial numbers are best-effort here;
    //  re-check those rows manually after restore if they were used.)
    $('#table_products tbody tr').not('.template-row').remove();
    sale.products = [];
    (payload.products || []).forEach(item => addRow(item));

    // Rebuild bank payments + cheques
    $('#bankPaymentsContainer').empty();
    (payload.bank_payments || []).forEach(bp => addBankPaymentRow(bp.bank_id, bp.amount));

    $('#chequesContainer').empty();
    (payload.cheques || []).forEach(ch => addChequeRow(ch));

    recalcAll();
    if (typeof updatePaymentSummary === 'function') updatePaymentSummary();
  }

  function checkForDraft() {
    let raw;
    try { raw = localStorage.getItem(DRAFT_KEY); } catch (e) { return; }
    if (!raw) return;

    let draft;
    try { draft = JSON.parse(raw); } catch (e) { clearDraft(); return; }
    if (!draft || !draft.payload || !Array.isArray(draft.payload.products) || !draft.payload.products.length) {
      clearDraft(); return;
    }

    Swal.fire({
      title: 'Unsaved sale invoice found',
      text: 'Pichli invoice save nahi ho payi thi. Kya usay restore karna chahtay hain?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Restore',
      cancelButtonText: 'Discard (Start Fresh)',
      allowOutsideClick: false
    }).then(res => {
      if (res.isConfirmed) {
        restoreDraftIntoForm(draft.payload);
      } else {
        clearDraft();
      }
    });
  }

  // setTimeout(checkForDraft, 300);
  const loadInvoiceFromCache = String(settingsDict.load_invoice_from_cache).toLowerCase() === 'true';
  if (loadInvoiceFromCache) {
    setTimeout(checkForDraft, 300);
  }

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  RIGHT PANEL — Hold Invoices list                             ║
  // ╚══════════════════════════════════════════════════════════════╝
  var HOLD_EDIT_URL_TPL = "{% url 'sales:sales_edit' 999999999 %}";

  function loadHoldInvoicesPanel() {
    var $list = $('#srpHoldList');
    if (!$list.length) return;

    $.get("{% url 'sales:ajax_hold_invoices' %}", {}, function (res) {
      if (!res.ok || !res.invoices || !res.invoices.length) {
        $list.html('<div class="srp-hold-empty">No held invoices</div>');
        $('#srpHoldCount').text('0');
        return;
      }
      $('#srpHoldCount').text(res.invoices.length);
      $list.html(res.invoices.map(function (inv) {
        var editUrl = HOLD_EDIT_URL_TPL.replace('999999999', encodeURIComponent(inv.invoice_no));
        return '<a class="srp-hold-row" href="' + editUrl + '">'
             +   '<span class="srp-hold-no">#' + spEsc(inv.invoice_no) + '</span>'
             +   '<span class="srp-hold-amt">' + fmt2(inv.amount) + '</span>'
             + '</a>';
      }).join(''));
    }).fail(function () {
      $list.html('<div class="srp-hold-empty">Could not load</div>');
    });
  }

  if (String(settingsDict.show_right_panel_in_sale_invoice).toLowerCase() === 'true') {
    loadHoldInvoicesPanel();
  }

</script>


{% endblock %}